I have two <p> elements inside a <div> element, and want to position them at the center of the <div> element. e.g.
<div id="mydiv">
<p class="above">some text</p>
<p class="below">other text</p>
</div>
Note: the <div> element itself is not positioned at the center of the browser window, so the positioning of <p> elements is only relative.
text-align: center;
for text.
margin: 0 auto;
for block level elements like a div.
EDITED:
Add following css rules in #mydiv
display:table-cell;
vertical-align:middle;
Like This
#mydiv{
position:relative;
border:1px solid #000;
width:400px;
height:300px;
display:table-cell; /* Added rule - Note: IE8+, Firefox, Chrome, Opera, Safari */
vertical-align:middle; /* Added rule */
}
#mydiv p{
text-align:center;
}
UPDATED DEMO
text-align: center;
It's worked for me.
You may try;
margin-left:auto;
margin-right:auto;
to your p
Here is a Live Demo
If you want to center both vertically and horizontally, you may try Dead Center
Here is a demo showing centering a div Both Vertically and Horizontally
Related
I am attempting to get two divs to be side-by-side and in the center of a wrapper div. My current method is to align the wrapper contents to center, then display as an inline block. However, this does not work in IE7, which I must code for. I've added a JS fiddle with a simple example. Is there a way to accomplish this in IE7?
jsfiddle
http://jsfiddle.net/QDn6T/
HTML
<div id="wrapper">
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
</div>
CSS
#wrapper{
height:800px;
text-align:center;
background-color:orange
}
#div1{
background-color:green;
width:100px;
display:inline-block;
}
#div2{
background-color:blue;
width:100px;
display:inline-block;
}
There is an IE7 hack that will allow for proper display of elements as if they are inline-block elements. The hack is added to css as below.
#div1{
width:300px;
display:inline-block;
zoom:1;
*display:inline;
}
The * allows for only IE to interpret the display:inline property. zoom:1 allows for the inline element to display with the width, by triggering hasLayout. Source below:
http://uncorkedstudios.com/blog/how-to-fix-the-ie7-and-inlineblock-css-bug
I have few <div>s having display:inline-block, inside an absolute positioned parent <div>.
HTML
<div id='wrap'>
<div id='container'>
<div class='box'></div>
<div class='box'></div>
<div class='box'>#</div>
<div class='box'></div>
</div>
</div>
CSS
*{
margin:0;
}
html, body{
height:100%;
}
#wrap{
position:relative;
background:lightgreen;
height:100%;
}
#container{
position:absolute;
bottom:0px;
vertical-align:baseline;
}
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
}
When I add some ascii character codes in any of the <div>s, strangely other <div>s move up. if I remove the ascii character then all <div>s align perfectly in the same row.
check this JSFiddle
I am aware of other ways for making this layout, I can make the boxes absolute and force them to be positioned at the bottom of the parent, I'm aware of css3 flex.
But I'm interested in this specific problem, can somebody explain why is this happening..? or how can I fix it as it is?
Update
I am not interested in fixing it, since there are many ways to achieve the same alignment. I just want to understand what's happening. The question is, the divs are being being aligned at the bottom by default. Why does the other divs suddenly aligns at the top when one of the divs have character inside it?
Updated Fiddle with both scenarios
side note: this only happens when I add text inside the elements, if I add an HTML element instead of a character all divs still aligns at the bottom.
.box{
display:inline-block;
width:80px;
height:120px;
background:white;
border:1px solid;
vertical-align: top;
}
add vertical-align: top;
when
I'm trying to place a div that scrolls. I want it dead center on the page but it's not doing it with the code I provided below. Please help.
CSS
#content
{
text-align: center;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
overflow:scroll;
}
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
A div is a block level element and will not listen to text-algin. You will either need to use margin: 0 auto on the .scroll element or make the div an inline-block element. Though support for block level elements to be inline-block level elements is not totally supported so you would have to use a span for complete support. However the better option is if your div has a set width, use a left and right margin of auto on the element you want to center.
text-align only affects text. To position a <div> in the center, use
margin-left:auto;margin-right:auto.
try this
HTML
<div id ="content">
<div class="scroll"> Stuff </div>
</div>
CSS
#content
{
text-align: center;
margin-left:auto;
margin-right:auto;
width:300px;
height:200px;
overflow: scroll;
}
.scroll
{
background-color:#fff;
color:#000;
width:500px;
height:400px;
}
live fiddle here
You can add display:inline;margin:auto to your <div>.
I'm trying to centre align an image using a div and a CSS class (the tag is wrapped in a div class="center" tag). What I'm using at the moment is working in Dreamweaver (when I go to design view) but not when I load the page up in Safari. Here is my code:
.center {
display:inline;
text-align:center;
-webkit-inline;
-webkit-center;
background-color:transparent;
}
Sorry for asking such a simple question, I'm completely new to HTML, my experience is in Objective-C.
text-align: center caused the content to be centered (within the container), and not the container itself being centered.
Since you use display: inline, the size of the container will be the same as its content, and the centering will not have the effect you're after.
Either, you use the margin: 0 auto to center the container (towards its parent container), OR you change display: inline to display: block.
Give text-align:center; to it's .center parent DIV. Write like this:
HTML
<div class="parent">
<div class="center"></div>
</div>
CSS
.parent{
text-align:center;
}
.center {
display:inline;
background-color:transparent;
}
You can use margin : 0 auto , to a vertical align , but if you want a vertical-horizontal align , you need a code like this:
.center{
width:200px;
height:200px;
margin-left:-100px;
margin-top:-200px;
position:absolute;
top :50%;
left:50%;
}
margin: 0 auto. Is what you're looking for. You'll need a width also.
div.center { margin:0 auto; width: 20%;background:orange;}
http://jsfiddle.net/PZ5AZ/
Please advise me what to do to make text Send Vertical align middle .also please advise that these problems not came in future what can i do ?
As has been previously said vertical alignment is not really supported on anything that isn't a table cell.
But if you are just trying to center a single line of text you could use line-height. If you set the line-height to the same as the height of the element and remove any padding then the text will display in the middle of the element, just as if it is vertically aligned.
So on your example the following would work (if you remove the default styles first):
line-height:28px;
height:28px;
padding:0px;
But if the text wraps to more than one line this solution won't work, the text will suddenly become very spaced.
For a more general solution it is best to use javascript to dynamically work out the padding required for the particular element.
You can't vertically align text outside of tables so there are two options:
You play with the padding of the parent element to achieve the illusion of v-aligned text. As illustrated by Mr Long.
or
You make the parent element position:relative; and the child element absolute:
<div id='container'>
<div id='txt'>My Text</div>
</div>
#container{
position:relative;
}
#txt{
position:absolute; left:0px; top:50%;
margin-top:10px; /* half the height of the text element */
}
/* hint: for scaling attributes use %'s */
I think the first option is the simplest in your case.
Good luck Bro!
W.
if you like to center the text inside the div vertically and perhaps horizontally you can try this
#container{
position:relative;
width:200px;
height:300px;
border:1px solid #CCCCCC;
}
#txt{
position:absolute;
width:150px;
height:50px;
top:50%; left:50%;
margin-top:-25px; /* 1/2 of height */
margin-left:-75px;/* 1/2 of width */
border:1px solid #FF0000;
}
<div id="container">
<div id="txt">My Text</div>
</div>
Try this: padding: 0px 0px 4px 0px;
Add this to clear default button padding in Mozilla:
button::-moz-focus-inner {
border:0;
padding-top:0;
}