CODEWITHSUNDEEP
css
Arunesh
Arunesh

Reputation: 297

How to show the Content of div in the middle of the div

I am using asp.net. I want to show the content of the div in the middle. but it showing the content in the top. my Div Is as follows:

    <div style=" height:100px; width:100px; float:left; background:#666666;">
     <span>about us</span>
    </div>

How can i show the content in the middle. I have used Margin and padding but it shows the result in the whole div not the content. How can i do this please help i am new to asp.net.

thank you

Upvotes: 0

Views: 65

Answers (6)

Tadit Dash
Tadit Dash

Reputation: 305

Refer - how to align text vertical center in div with css

It explains how to centralize text beautifully with many demos.

Upvotes: 0

Hemant Chhapoliya
Hemant Chhapoliya

Reputation: 46

You need to change the display of div to table-cell, and then you can use vertical-align property as given

 <div style=" height:100px; width:100px; float:left; background:#666666; display: table-cell; vertical-align: middle">
     <span>about us</span>
    </div>

check it

Upvotes: 1

Abhishek Jain
Abhishek Jain

Reputation: 2607

Try this:

height:100px; width:100px; background:#666666; line-height:100px;

Upvotes: 1

Sasidharan
Sasidharan

Reputation: 3750

Just remove float:left and add text-align property and line-height property.

<div style=" height:100px; width:100px;background:#666666;text-align:center;line-height:100px;">
     <span >about us</span>
</div>

enter image description here

Upvotes: 1

Benjamin
Benjamin

Reputation: 2123

If you want to align it horizontally, Bibhu's answer will do.

To align it vertically in the middle, add this to your style:

line-height: 100px;
vertical-align: middle;

Upvotes: 1

Bibhu
Bibhu

Reputation: 4081

Try this:

   <div style=" height:100px; width:100px; float:left; background:#666666;text-align:center">
     <span>about us</span>
    </div>

Upvotes: 1

Related Questions