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>.
Related
I know this sounds too simple but I am unable to place one div below the other div , and my code is
html:
<div id="gamediv"></div>
<div class="style"></div>
css:
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
After doing some ugly hack in my css & in my first div style i am able to place my desired div below first div , this is my css code:
.style{
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
position:absolute;
bottom:0px;
left:323px;
}
first div style property: <div id="gamediv" style="position:relative;"></div>
for now this solution is working but still i can't figure out why previous solutions didn't worked, any explanation regarding this is appreciated!!
This is beacuses your div will be displayed befault in line.
It will take all the space it has to dispay divs.
something you can do is to create another div to include the 2 you create and specifying a specific width:
<div id="container">
<div id="gamediv"></div>
<div class="style"></div>
</div>
Then add your style such as
#container{
width: 800px;
height: 200px;
}
.gamediv{
width:750px;
height:40px;
}
.style {
width:728px;
height:90px;
margin-left:auto;
margin-right:auto;
}
then you may want to align with float or centre with margin:auto; Try to to imagine div as boxes. if it help you may add
border:1px solid black;
this will draw the box and you will see what you are doing
add display: block; also in the stylesheet (for both div)
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 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
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;}
I want to center the speaker div, which is within the review div. i cannot seem to get it working. :(
HTML:
<div class="review">
<div class="speaker">
<p>SPEAKER DIV</p>
</div>
</div>
CSS:
.speaker{
align:center;
}
This doesn't work :/
Give it a width and margin:0 auto;
<div class="review">
<div class="speaker">
<p>SPEAKER DIV</p>
</div>
</div>
div.speaker{
background-color:red;
width:100px;
margin:0 auto;
}
See it in action!
There’s no such CSS property as align.
When you say you want to “center” the speaker div, what exactly do you mean?
You can center-align its text like this:
.speaker {
text-align:center;
}
(See http://jsfiddle.net/pauldwaite/X7LN5/)
If, alternatively, you want the speaker div to only be as wide as its text, and be positioned in the center of the review div, then you’d need to use this:
.review {
text-align:center;
}
.speaker {
display:inline-block;
}
(See http://jsfiddle.net/wxha4/)
I'm about a year late to the party, but here goes:
In most browsers, this will work:
.speaker{
margin: 0 auto;
}
However, in IE8 and below, the margin:auto will not work (IE8 only if there is no !DOCTYPE declaration. See W3Schools Horizontal-Align Tutorial)
In that case, you can use a combination of text-align: center and width to get the desired effect:
.review{
text-align:center;
}
.speaker{
text-align:left;
width:200px;
margin:0 auto;
}
The downside to this method is that you have to declare a width, or it won't be centered.
Good luck!
It work perfectly.
.speaker{
margin: 0 auto;
text-align:center;
width:100%;
}
good luck
Give the parent a text-align: center;
Then you can move the child anywhere in the parent div
.speaker {
margin: 0 auto;
try
.speaker p{
text-align:center;
}
or
.speaker {
text-align:center;
}
There is no align attribute in CSS. Set the horizontal margins to auto to centre a block. See Centring using CSS for more details (including work arounds for Internet Explorer issues)
Thats because that syntax does not exist. You need to center the div via the margin attribute.
.speaker{
margin:0px auto 0px auto;
}
DEMO http://jsfiddle.net/t4kBj/