Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Vertically center content of floating div

How do I verically center the content of floating div (which height I don't know)?

There is very simple HTML and CSS (see this fiddle: http://jsfiddle.net/DeH6E/1/)

<div class="floating">     This should be in the middle </div> ​ .floating {     height: 100px;     float: left;     border: 1px solid red;     vertical-align: middle; }   ​ 

How do I make the sentence "This should be in the middle" appear really in the middle (vertically centered)? vertical-align: middle does not seem to work. I have tried display: table-cell and it didn't work either. What's the best way to solve this issue? I'd like to avoid inserting any other HTML tags, do it just via CSS.

(Just to make it clear: I don't know the actual height of the container, 100px is just for the example)

EDIT: I'd like you to understand me, so... Always when I design web page, I follow the rule that HTML holds the content and CSS is responsible for the visual style. I never mix them up together or use one just to enable the other. In this case, I want to stick with this rule too. I don't want to insert HTML element just for the CSS.

like image 999
Pavel S. Avatar asked Aug 28 '12 22:08

Pavel S.


People also ask

How do I center content vertically in a div?

You can do this by setting the display property to "flex." Then define the align-items and justify-content property to “center.” This will tell the browser to center the flex item (the div within the div) vertically and horizontally.

How do you float a div vertically?

By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment.

How do you center something with a float?

To center the text using float we can use margin-left or margin-right and make it 50% , like below.

How do I center text vertically in HTML?

For vertical alignment, set the parent element's width / height to 100% and add display: table . Then for the child element, change the display to table-cell and add vertical-align: middle . For horizontal centering, you could either add text-align: center to center the text and any other inline children elements.


Video Answer


2 Answers

The others are right, you need to nest two DOM elements which gives you more options controlling the centering. Here's the code:

.floating {    display: table;    float: right;    height: 200px;    width: 400px;    border: 1px solid red;  }  .floating p {    display: table-cell;     vertical-align: middle;     text-align: center;  }
<div class="floating">      <p>This is the proper way that validates and breaks across multiple      lines, if the text is longer than just a few words and still      should be vertically centered. Here, it's also horizontally      centered for added joy.</p>  </div>
like image 159
Systembolaget Avatar answered Sep 28 '22 03:09

Systembolaget


Add the text inside a <p>.

HTML

<div class="floating">     <p>This should be in the middle</p> </div> 

CSS

.floating {     height: 100px;     border: 1px solid #f00;     display: table-cell;     vertical-align: middle; } ​ 
like image 22
Henrik Ammer Avatar answered Sep 28 '22 03:09

Henrik Ammer