CODEWITHSUNDEEP
htmlcss
Manish Kumar
Manish Kumar

Reputation: 10482

HTML: put text on the center

I am trying to put text in the center. Vertically its in the middle but horizontally not. What am I missing? Here is the FIDDLE

<div style="display: table; height: 600px; overflow: hidden;text-align: center">

    <div style="display: table-cell; vertical-align: middle;
                              text-align: center;" class="dlgImg">this is text</div>

</div>

Upvotes: 0

Views: 313

Answers (8)

Lekhnath
Lekhnath

Reputation: 4625

Your vertical alignment is functioning because you have set height of the table.

style="display: table; height: 600px; .

Your horizontal alignment will function if you provide width for table

style="display:table;height:600px;width:100%;"

Upvotes: 0

jhunlio
jhunlio

Reputation: 2660

if you notice you have div inside the div

your setup like this:

<div class="imgContainer">
  <div>
    <div>
          /* text here */
    </div>
  </div>
</div>

you give exact width in your div.imgContainer width:800px; and the next child div width:600px; in inline style but you don't give width in div where the text belong.

try this solution hope this help

.imgContainer div{
    width:100%;
}

DEMO

Upvotes: 1

Sarath
Sarath

Reputation: 608

give width:100% or how much the width you want to first div 

<div style="display: table; width:100%;height: 600px; overflow: hidden;text-align: center">

    <div style="display: table-cell; vertical-align: middle;
                              text-align: center;" class="dlgImg">this is text</div>

</div>

Upvotes: 1

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Added width:100%; to first div

<div style="display: table; height: 600px; overflow: hidden;text-align: center; width:100%;">
    <div style="display: table-cell; vertical-align: middle;text-align: center;" class="dlgImg">this is text</div>
</div>

Demo Fiddle

Upvotes: 1

PravinS
PravinS

Reputation: 2584

use this

<div style="display: table; height: 600px; overflow: hidden;text-align: center;width:100%">
    <div style="display: table-cell; vertical-align: middle;text-align: center;" class="dlgImg">this is text</div>
</div>

JSFIDDLE

Upvotes: 1

d.yuk
d.yuk

Reputation: 809

You are missing the width for the div. Everything would be fine after you add the width to either one or both of the div(s).

Upvotes: 1

SpiderCode
SpiderCode

Reputation: 10122

Issue is that your both divs should be 100% width. make it to 100% and it will solve your problem.

Live Demo

Add Width:100% will solve your problem as shown below :

<div style="display: table;width:100%; height: 600px; overflow: hidden;text-align: center">

    <div style="display: table-cell;width:100%; vertical-align: middle;
                              text-align: center;" class="dlgImg">this is text</div>

</div>

Upvotes: 1

user3368481
user3368481

Reputation: 

        <div style="display: table; height: 600px; overflow: hidden;text-align: center;margin:auto">
            <div style="display: table-cell; vertical-align: middle;text-align: center;margin:auto" class="dlgImg">this is text</div>
        </div>

Upvotes: 1

Related Questions