-1

I have been looking at several threads on SO and on google that says that i could use line-height after setting the height of the div to make the text align vertically. This however requires that you set the height of the div which cant be good for a responsive web design ? I'm trying to align a single line of text in a navigation bar.

Some sample code:

<nav>
  <section class="logo">
    <span>logo text</span>
  </section>
  <section>
    <ul>
      <li>link</li>
      <li>link</li>
      <li>link</li>
      <li>link</li>
    </ul>
  </section>
  <section class="dropdown">
    <span>dropdown</span>
  </section>
</nav>

.logo {
  display: inline-block;
}

.dropdown {
  display: inline-block
}

I need to align the logo and dropdown text inside the span elements, but i dont have any height set anywhere because I want the design to adapt to the screen resolution more easily.

The span is inside a nav element so i thought i could do "height: 100%" on the span if i set it to an inline-block element but that did not work.

Is there any way to get line-height to work with height without manually specifying the height for the span in pixels so i can get a vertically aligned text which is as responsive as possible ?

I have been looking at using the vertical-align property with css tables as well, but it looks like i also in that case have to specify the height of the container element in pixels.

exceed
  • 459
  • 7
  • 19
  • you may set both an height and a line-height in relative units (e.g. `em`)? – Fabrizio Calderan Jan 13 '15 at 14:09
  • you can also set it in terms of numbers (`line-height:1.2;`), which is relative to the font-size of the element => https://developer.mozilla.org/en-US/docs/Web/CSS/line-height – PlantTheIdea Jan 13 '15 at 14:10
  • I want the browser to calculate the height of the element and adjust the line-height according to that instead of hard-coding it. I do see that w3c (http://www.w3.org/Style/Examples/007/center.en.html#text) is also setting the height manually so i guess there might not be a way to do this..but it does not seem like good coding to set the height manually and i would think that there was some way to adjust this height/line-height automatically if you for example resize the screen resolution or the browser. – exceed Jan 13 '15 at 14:19
  • Please specify which questions and answers (“threads”) you are referring to. The `line-height` property is for setting line height and thereby spacing between baselines; using it for vertical alignment is unreliable trickery. Consider describing (in the title and in the question itself) your *original problem* and your best attempt at solving it, instead of an assumed solution that isn’t even used in your example. – Jukka K. Korpela Jan 13 '15 at 14:21
  • @Jukka: Almost everywhere i see people using line-height for vertical alignment. Take for example http://css-tricks.com/vertically-center-multi-lined-text/ but also threads on SO like http://stackoverflow.com/questions/4785871/css-vertical-align as one example. I think my question is pretty clear as im asking for how to vertical align text in a div basically but without having to set the height manually which the line-height seems to depend up on – exceed Jan 13 '15 at 14:35
  • Height has never been an issue for me when dealing with responsive designs, and part of that is because I always set the height on elements. Having fluid heights seem to result in wonky behavior. – Waxi Jan 13 '15 at 14:37
  • If i'm setting the height of a content container for example and the content is above the height of the container then it will overflow unless you use the overflow: scroll property which is usually not what you want because you want to use your browsers scroll bar... In this situation when you only have one line it wont overflow but if you resize the window or screen resolutation it wont adapt in any way from what i remember – exceed Jan 13 '15 at 14:46
  • You have not described a desired layout (just saying that some items should be “aligned” does not say that—aligned *how*?), and you have not provided actual code, with all the relevant CSS, of your best attempt so far. – Jukka K. Korpela Jan 13 '15 at 14:52
  • I mentioned vertical alignment, and the code i showed was a sample which is almost identical to the one im using and i dont see how the rest of the css which dont apply to this is relevant. Thanks for devoting your time trying to help me though, i will continue further to use the suggestions written by the w3c which is basically the same as davedadizzel wrote below. – exceed Jan 13 '15 at 18:52

1 Answers1

0

Does this work for you?

NOTE: I gave the parent element a height of 30vh, but it will work with any/no defined height. It´s just so you can see that it is centered.

.parent {
  position: relative;
  background-color:blue;
  width:100%;
  height:30vh;
}
.child {
  position: absolute;
  top: 50%; width:100%;
  transform: translateY(-50%);
  background-color:red;
}
<div class="parent"> 
    <div class="child">Your random text..... Your random text.....</div>
</div>
  • I think this is the best way ive seen it done yet (this also seems to be the way the w3c suggests doing it)..when setting the height on the child i think you are locking it to the height of the parent so it shouldnt be too bad for responsive design..i will try it out soon as im not able to do it right now.. – exceed Jan 13 '15 at 15:47
  • It would be nice if you could accept my answer, if you are fine with it now. I can´t even comment everywhere right now ;) –  Jan 15 '15 at 15:29
  • Sorry about the delay, ive been reading up on the transform property as well as the viewport high you used which i didnt know about and have not gotten a chance to get back to you. I does seem like the content is overflowing unless you put min-height: 30vh instead of height: 30vh though, other than that i will test it more soon. – exceed Jan 15 '15 at 16:00
  • I dont understand why it is not centered without the transform since you are absolutely positioning the child within a parent with a defined height..its being positioned almost in the center but it is offset by a little, do you know why? anyway, your answer solves the vertical centering problem, thanks. – exceed Jan 15 '15 at 20:02
  • think i understood it now :) http://joshbroton.com/absolute-positioning-and-horizontal-vertical-centering/ seems to answer this. – exceed Jan 15 '15 at 20:29