How to set vertical align of elements that exist into a div tag to center with css?

Question

I try to to set vertical align of elements that exist into a div tag to center. Please advice

<div class="new_div">
     <h3>نام من</h3>
    <p>توضیحات من</p>
    <button class="btn btn-primary">بیشتر ...</button>
</div>

css

.new_div {
    position: absolute;
    width: 100%;
    text-align: center;
}

In this case the elements appear like this image: http://i.stack.imgur.com/hvlfA.gif. Spaces most be deleted — hmahdavi, Nov 23 '15 at 14:01
If the container DIV has no height, it is tall exactly as required to contain the elements inside, so you don't need to vertically center anything... — holden, Nov 23 '15 at 14:40

score 1 · Answer 1 · answered Nov 23 '15 at 13:24

1

For vertical center? Try something along the lines of

.new_div {
   width: 100%;
   height: 100px;
   line-height: 100px; /* Same as new_div height */
 }

answered Nov 23 '15 at 13:24

Liam Macmillan

388
1
5
13

You can not add height to div – hmahdavi Nov 23 '15 at 13:26
Why can't you add a height to the div? – Liam Macmillan Nov 23 '15 at 13:37
What are you trying to do here? Get them aligned next to one another, vertically aligned in the whole page or what? – Liam Macmillan Nov 23 '15 at 13:39

score 1 · Accepted Answer · edited Nov 23 '15 at 14:01

1

You can use display: table-cell;

Jsfiddle

body,
html {
  position: relative;
  margin: 0;
  padding: 0;
}
.new_div {
  position: absolute;
  width: 100%;
  text-align: center;
  display: table;
  height: 200px;
  background-color: red;
}
.container {
  display: table-cell;
  vertical-align: middle;
}

<div class="new_div">
  <div class="container">
    <h3>نام من</h3>
    <p>توضیحات من</p>
    <button class="btn btn-primary">بیشتر ...</button>
  </div>
</div>

edited Nov 23 '15 at 14:01

Hynes

3,394
3
22
22

answered Nov 23 '15 at 13:55

Alex

8,461
6
37
49

Additional space appeared – hmahdavi Nov 23 '15 at 14:08
Check [this](http://jsfiddle.net/spn4c1aj/2/) – Alex Nov 23 '15 at 14:11
Can you explain more? – Alex Nov 23 '15 at 14:15

score 0 · Answer 3 · answered Nov 23 '15 at 13:59

You could try to

use the display attribute
in combination with the vertical-align attribute

    <div style="display: table; height: 400px; overflow: hidden;">
        <div style="display: table-cell; vertical-align: middle;">
          <div>
            <h3>نام من</h3>
            <p>توضیحات من </p>
            <button class="btn btn-primary">بیشتر ...</button>
          </div>
       </div>
    </div>

How to set vertical align of elements that exist into a div tag to center with css?

3 Answers3