This seems like it should be a very simple issue to me, although I just can't figure it out on my own. I have a h2 element that I want to keep at 85%, and it contains a short line of text. I want it to be centered in its containing div, not just for the text to be centered in the h2 element.
Here's some code:
<div class="main">
<div class="secondary">
<h2>Three words of text</h2>
</div>
</div>
CSS:
div.main{
text-align:center
}
div.secondary{
text-align:center
}
h2{
text-align:center
width:85%
}
I made a Fiddle, too
Thanks to anyone who can help.
First of all, you are missing the semicolons in your properties. That makes css parsers skip parsing the rest of the properties.
On the other hand, there are several ways to do this, but as you have already a fixed width, try this:
h2 {
text-align:center;
width:85%;
margin: 0 auto;
}
Add:
margin: 0 auto;
To the h2 style rule.
http://jsfiddle.net/wF57b/1/
The text-align property centers the text inside the container (in this case, h2).
You don't want to align the text itself, but the h2 container. So, instead of using text-align: center;, you should use margin: auto. Here's your updated jsFiddle.
Related
i'm with some problems here.. I've tried a lot of different fixes for this, but none of them seems to work. I want to align the content of a div in the middle of another div.
I want to use only auto or % values because i want to make the website also for mobile devices.
This is the code i have so far: http://codepen.io/anon/pen/xHpaF/
I want to make those red boxes aligned to the center of the wrap div.
If anyone can help me. Thanks!
Well, first of all, your <div id="content" /> is an ID, not a class. So change your .content in the CSS to #content. Second of all, float throws off the text-align: center;. If you remove that, and set it to display: inline-block;, it should fix your issues:
check it here: http://codepen.io/anon/pen/ncviE/
css changes:
#content {
width:auto;
height:250px;
margin:0 auto;
background:#0C0;
display:table-cell;
text-align:center;
}
.view {
display: inline-block;
float: none;
}
I have a web page like this.
<html>
<head></head>
<body>
<div style="background:blue">
<h3 style="background:green">Hello world.</h3>
</div>
</body>
</html>
When I analyze the output in chrome, it seems that the h3 tag is taking more space than the div tag. I want the div tag to completely include the h3 tag, and the background color of div to be shown in the entire area. Any idea how to do this?
The reason this is happening is that some elements have browser styling by default, that is why you should always use a css reset:
if you float the div it will wrap around the element, and set the margin of the h3 to 0.
<div style="background:blue;float:left;">
<h3 style="background:green;margin:0;">Hello world.</h3>
</div>
fiddle
For the div to take the entire screen's size remove the float.
<div style="background:blue;">
<h3 style="background:green;margin:0;">Hello world.</h3>
</div>
Like this
DEMO
CSS
.div1{
background-color:blue;
float:left;
}
h3{
margin:0;
padding:0;
background:green;
}
DEMO1
Set a font-size and line-height on the h3 like so:
h3 {
font-size: 16px;
line-height: 1em; }
Taken a css reset? This set all to default values.
http://meyerweb.com/eric/tools/css/reset/
Most simple solution I see, add overflow: hidden; to the enclosing div.
<h3 style="background:green;margin:0;">Hello world.</h3>
By default h3 has a margin associated with it. So you have to add a margin:0 to the h3 tag.
DEMO
set margin of h3 to 0.This will solve the problem.
I solved this issue by increasing the line height of h3.
People frown upon the center tag, but for me it always works just the way I want it. Nevertheless, center is deprecated so I'll make an effort.
Now I see many people suggest the cryptic CSS margin: 0 auto; but I can't even get it to work (see fiddle here). Other people will go modify position or display, but that always breaks something else.
How can I center a span using css so that it behaves exactly like the center tag?
<div class="container">
<span class='btn btn-primary'>Click me!</span>
</div>
Span is an inline element, and the margin: 0 auto for centering only works on non-inline elements that have a width that is less than 100%.
One option is to set an alignment on the container, though this probably isn't what you want for this situation:
div.container { text-align: center }
http://jsfiddle.net/MgcDU/1270/
The other option is to change the display property of the span:
/* needs some extra specificity here to avoid the display being overwritten */
span.btn.btn-primary {
display: table;
margin: 0 auto;
}
Using display: table eliminates the need to hard code a specific width. It will shrink or grow as appropriate for its content.
http://jsfiddle.net/MgcDU/1271/
You can set .container { text-align:center; } so that everything inside div.container will be centered.
In general, there are two ways centering things.
To center inline elements (such as text, spans and images) inside their parents, set text-align: center; on the parent.
To center a block level element (such as header, div or paragraph), it must first have a specified width (width: 50%; for example). Then set the left and right margins to auto. Your example of margin: 0 auto; says that the top and bottom margin should be 0 (this doesn't matter for centering) ad that the left and right margins should be auto - they should be equal to each other.
The <center> element is really just a block-level element with text-align:center;. If you sent border: solid red 1px; on it, you can see that it's 100% wide, and that everything inside it is centered. If you change text-align to left, then its children are no longer centered. Example: http://jsfiddle.net/KatieK/MgcDU/1275/. Perhaps you should just consider your <div class="container"> with text-align:center; } to be equivalent to <center>.
You make the span block level, give it a width so margin:auto works
see this fiddle
.center {
display:block;
margin:auto auto;
width:150px; //all rules upto here are important the rest are styling
border:1px solid black;
padding:5px;
text-align:center;
}
UPDATE: In order to NOT specify a width and have natural width of element on the span you will have to use textalign on parent
see this fiddle
.container{text-align:center}
.center {
border:1px solid black;
padding:5px;
}
<span> is an inline element. <div> is a block element. That's why it is not centering.
<div class="container" style='float:left; width:100%; text-align:center;'>
<span class='btn btn-primary'>Click me!</span>
</div>
You can center the content of span only when you convert it into block, using 'inline-block' style.
Your parent element needs to have a larger width in order to let a child element be positioned within it. After that the trick with margin: 0 auto; is getting the parent and child container position and display values to be compatible with each other.
.container {
border: 2px dashed;
width: 100%;}
.btn {
display: block;
margin: 0 auto;
width: 25%;
}
http://jsfiddle.net/rgY4D/2/
I have been trying to do the following. I have a <div> element
which spans the whole width of its parent div. Inside of this
I would like to place A. some text and B. an image.
A. some text (either loose text or text enclosed in a <p>, <h2>,
or <span>, or <div> element), on the left.
B. an image defined via an <img> element whose both height and width
are known.
Other requirements:
There must be 12px of space between the text and the <img> element.
Important: both the text from A. and the image from B. must be
centered as a group.
The text from A. must be vertically centered in its enclosing space.
How can I achieve this effect? I have tried different things but cannot
manage to place the image to the right of the text and cannot manage to
have the text A. vertically centered.
Anyone know how to solve this simple problem?
Thank you all for your answers, seems CSS makes simple things so hard,
anyways:
div#content_whatsnew, div#content_bestsellers { clear: both; height: 108px; font-size: xx-large; text-transform: uppercase; margin-left: 380px; }
div#content_whatsnew p, div#content_bestsellers p { float: left; height: 108px; line-height: 108px; padding: 8px 12px 0px 0px; color: black; }
div#content_whatsnew img, div#content_bestsellers img { float: left; height: 108px; }
Is this what you are trying to achieve? http://dabblet.com/gist/3130292
Is this about right?
http://jsfiddle.net/89twb/2/
For aligning text, check this out.
And for placing elements next to each other, this.
This should work:
<div class="my-outer-container">
<div class="my-inner-container">
<div class="my-text">Here is my text, it is lovely text.</div>
<img src="my-image.jpg" alt="" class="my-image" />
</div>
</div>
.my-outer-container {
width:auto;
text-align:center;
}
.my-inner-container {
width:XXXpx; /* enter whatever the width you want here is */
margin:0 auto;
overflow:auto;
}
.my-text {
width:XXXpx; /* enter whatever the width you want here is */
float:left;
margin-right:12px;
}
.my-image {
width:XXXpx; /* enter whatever the width you want here is */
height:XXXpx; /* enter whatever the height you want here is */
float:left;
}
Then maybe use the vertical centering tip on the link provided above by #biziclop
The most intuitive way would be using 'vertical-align:middle;' but it often tends not the way you want it to work.
I did some research and found this code from here. http://phrogz.net/css/vertical-align/index.html
Hope this helps!
<style type="text/css">
#myoutercontainer { position:relative }
#myinnercontainer { position:absolute; top:50%; height:10em; margin-top:-5em }
</style>
<div id="myoutercontainer">
<div id="myinnercontainer">
<p>Hey look! I'm vertically centered!</p>
<p>How sweet is this?!</p>
</div>
</div>
In order to center a div, it has to have a fixed width. If it spans the width of its parent div, you can only then center things inside it. So it sounds to me like the best solution would be to place your text in a fixed-width left-floated div, and do the same for your image, and then place those both in a fixed-width holder div, which is centered with margin:auto;
Here's an example: http://dabblet.com/gist/3130148
Edit- I vertically centered the text by placing it in a table. Tables are the only surefire way to vertically center something cross-browser.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
How to center DIV in DIV?
Sounds simple but couldn't figure it out:
How do I center a fixed width div on a page?
By default, it goes to the left.
halign is deprecated but I can find a could replacement.
[update]
width:800px;left-margin:auto;right-margin:auto:
works great.
Is there a way to do this without setting a fixed width?
Try this:
<style>
.centered {
margin-left:auto;
margin-right:auto;
}
</style>
<div class="centered">
Some text
</div>
<div style="margin:0 auto">content here</div>
You can center any div that doesn't span the entire page. Say your div is
.div {
width: 80%;
margin: 0 auto;
}
Then it will work fine. As Evan said "display: inline-block;" will make the div as wide as its contents which will also work great with "margin: 0 auto;".
A div, by default, is the entire width of the page. You can center the contents by setting the css of the div to:
.mydiv
{
text-align: center;
}
OR
You can center the div itself by doing this:
.mydiv
{
display: inline-block; /* make it be only as wide as its contents */
margin: auto; /* centering magic by making the margins equal and maximum */
}
div {
margin-left: auto;
margin-right: auto;
}
As long as you have an appropriate doctype declared, centering a div on a page should be as easy as:
#someDiv {
width: 624px;
margin-left: auto;
margin-right: auto;
}
If you're using IE and you don't have a doctype declared (you're running in quirks mode), this won't work. The fix is to add the appropriate doctype declaration to your page. You can find the appropriate declaration here:
W3C QA - Recommended list of Doctype declarations you can use in your Web document
There's generally two ways of doing (that I've seen). One with the margin attribute and another with positioning and left:50%
http://jsfiddle.net/NvaEE/
<br>
<div class="first"> I have a fixe dwidth</div>
<br>
<div class="second"> I have a fixe dwidth</div>
div{width:200px; background:#ddd;}
div.first{margin:0 auto;}
div.second{position:absolute;left:50%;margin-left:-100px}
margin:auto; should do the trick, I guess?
You wrap it in a container div that spans the width of the page and give that container div the
text-align: center;
css attribute.
There are other methods, such as managing the margins and widths. For most cases, you can get by with text-align.