-2

I have an h3 with a height of 100%. Therefore the height is unknown. How can I center the text within itself? For the sake of the example, I have given the parent fixed dimensions but this is not the case. I have tried using vertical align but that doesn't work, I believe I may need to change the display to do that?

I don't want to center the text within its parent, I know various methods to do this. I want to know if it is possible to vertically center it within itself. The text needs to be 100% in both dimensions so that the link fills the parent div.

.unknowndimensions{
  height:300px;
  width:300px;
  }
.unknowndimensions h3{
  height:100%;
  width:100%;
  background:#f7f700;
  text-align:center;
  }
<div class="unknowndimensions">
  <a href="#"><h3>Title</h3></a>
</div>
GeorgeButter
  • 2,521
  • 1
  • 29
  • 47
  • Check out this: https://css-tricks.com/centering-css-complete-guide/ – Hayden Schiff Sep 14 '16 at 03:16
  • @HaydenSchiff This is a great resource, I use it often but the methods it uses won't work on this example. – GeorgeButter Sep 14 '16 at 03:22
  • @misterManSam No this is not the same problem. This is not text within a div. The solution will be totally different. – GeorgeButter Sep 14 '16 at 03:26
  • 1
    It doesn't matter if it is in a div or not. That is how you vertically center text with CSS –  Sep 14 '16 at 03:27
  • 2
    @Gorg - This question has been asked countless, probably hundreds, of times. Look through the existing answers and pay particular attention to `display: table` or `display: flex` solutions. – misterManSam Sep 14 '16 at 03:28
  • @TinyGiant No, That is how you center a text element within a div. What I want to know is how to center text within its self. – GeorgeButter Sep 14 '16 at 03:29
  • @misterManSam Please provide an example, I can't find one. – GeorgeButter Sep 14 '16 at 03:32
  • You need a container of some sort, and you have one, the h3 element. –  Sep 14 '16 at 03:32
  • Its the same thing. Those methods can apply to any DOM element. Not just a `div`. – AA2992 Sep 14 '16 at 03:33
  • @AnkithAmtange Nope, it's definitely different. – GeorgeButter Sep 14 '16 at 03:34
  • 1
    @gorg nope, it's entirely the same –  Sep 14 '16 at 03:43
  • 2
    [This](http://stackoverflow.com/a/22218694/4639281) (from the linked canonical question) uses the exact same method as the answer which you have accepted here, and does so with a better and more complete explanation. –  Sep 14 '16 at 03:45
  • @TinyGiant I haven't accepted an answer. As all of the answers provided only show how to center text within a parent element. which isn't my question. – GeorgeButter Sep 14 '16 at 03:51
  • 2
    @Gorg - Doesn't [this example I made meet your criteria](https://jsfiddle.net/9xL48r7o/)? It's the same thing as the others... the h3 is 100% high and wide – misterManSam Sep 14 '16 at 04:00
  • 1
    @misterManSam Awesome, yes it does! I was using the flex examples on the parent div. Thanks. – GeorgeButter Sep 14 '16 at 04:02

1 Answers1

3

Using table method,

.unknowndimensions{
  height:300px;
  width:300px;
  }
.unknowndimensions a{ 
  display:table;
  width:100%;
 height:100%;
  }
.unknowndimensions h3{
  display:table-cell;
  vertical-align:middle;
  background:#f7f700;
  text-align:center;
  }
<div class="unknowndimensions">
  <a href="#"><h3>Title</h3></a>
</div>
Praveen
  • 827
  • 6
  • 14
  • Cool answer, I had been using a hacky empty to make the link fill the container. I was sure there had to be another way. This answer fits the bill. – GeorgeButter Sep 14 '16 at 04:00