Why does text-align: center headers?
Headers are block elements h1,h2,etc. Why is it that text-align centers headers even though the documentation specifically says it does not: Docs on text-align
This property describes how inline-level content of a block container
is aligned.
I'm a little confused as to why it wont center a block element like a div, but willing to center a header. Could it potentially be because text inside a header is inline, but the actual header itself is a block element?
http://codepen.io/stephenhuh/pen/KrkLZG - codepen on this phenomenon.
* {
text-align: center;
}
.box {
background-color: blue;
width: 150px;
height: 150px;
}
From CSS 2:
Any text that is directly contained inside a block container element (not inside an inline element) must be treated as an anonymous inline element.
Like everyone else has already explained, it is centering the text content inside the header element. I'd just like to add that you can easily test this by adding a border or background to elements. If you do this, you'll notice that the header will span the entire width of its container by being a block element, and the text will only be centered inside that block.
(Alternatively, you could use an inspector to show the actual space an element is occupying)
The property text-align affects specific children of the parent that the property was assigned; namely inline type children. Text is inline, as well as spans and inputs unless otherwise overridden by CSS. If you need to center a block level element (horizontally) use margin:0 auto;.
Related
I'm trying to understand text-align but it seems it acts with different rules based on what type of element it is applied to and where it is applied from, whether a parent or a child element.
To my knowledge, if I apply text-align:center to a div, then all of the containing elements will have a text-align:center property as well.
If I apply text-align:center on an inline element like an image, nothing will happen because the image has no surrounding space that is part of the element. I have this code and I have no idea why it behaves the way it does. What I'm trying to achieve is to simply center an image horizontally within a header tag and I achieve it this way:
body {
margin: 0;
}
header {
background-color: black;
height: 100px;
text-align: center;
}
img {
height: 100%;
}
<body>
<header>
<img src="logo.png" alt="Logo image">
</header>
</body>
By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen? Isn't the image supposed to be aligned within its own space, and since there is none, it shouldn't work? I thought that saying text-align:center in a div would be like typing it for each one of the containing elements as property so it was just a quicker way of doing it. But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.
If I have a header with an image inside, isn't saying:
header{
text-align:center;
}
the same as saying:
img{
text-align:center
}
because the child elements get applied the parent property to them as well? I thought text-align would only act on the child elements of the element it is used on. but then why doesn't it work if I declare it on the image?
Even, though I tried to set the image to display:block and set text-align:center on it, this time I was sure it would work, but it didn't. Why?
If I use text-align:center on a p element, which is a block element, the element is centered within its own space, shouldn't that happen too for images that are set to display:block?
By applying text-align:center on the header element, the image is magically aligned in the center of the div. But why does that happen?
Images are, by default, display: inline, which causes them to be treated (more-or-less) the same way as a character of text.
But if I remove text-align:center from the header and I move it to the image element, then the image is not horizontally centered anymore, instead, it's on the far left of the header.
text-align describes how the inline content of the element should be aligned within the element.
An img element has no content.
If I use text-align:center on a p element, which is a block element, the element is centered within its own space
No, it isn't. The text inside the paragraph is centred. The alignment of the paragraph itself is unaffected (by default a p element is with: auto so will completely fill the available horizontal space after margins, borders and padding are accounted for).
The text-align CSS property sets the horizontal alignment of the inline-level content inside a block element or table-cell box.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-align
In the following snippet, header is a block level element. img is an inline level element. And so the image is horizontally aligned to the center of the parent block level element.
header{
text-align:center;
}
<header>
<img src="https://placekitten.com/100/100" alt="kitten" />
</header>
Is the following snippet the same as the above? No. Because text-align:center is not applied to a block level element that contains inline-level content.
img {
text-align: center
}
<img src="https://placekitten.com/100/100" alt="kitten" />
My prime objective was to create webpage with a heading with a border, and text underneath it which is as wide as the border of the heading (so if the heading with the border is 500px, then the text underneath should be directly underneath it, ie have a width of 500px).
I have used text-align: center; in the body tag already, so as to align the heading of the webpage to the center. I assumed everything written in the body tag would be centered automatically since they are all nested in body.
Inside the body, for the actual text written in the page, I've used a <div class="content"> container. I know that it has been applied satisfactorily to the actual text because all other formatting applies onto it as expected.
However, when I write width: 500px; inside the .content{}, the text suddenly goes into a left alignment. I tried to use text-align: center; in the .content{} class too, but even that didn't align the text in the center.
What am I missing here? Why isn't the actual text being displayed in the center, directly underneath the heading?
Thanks in advance!
For div tag when you set a width you also need to say that the div is no more block but inline-block elsewhere it becomes a block with the specified width. So one of these solutions works:
.content{
width:500px;
display:inline-block;
}
or
.content{
width:500px;
margin:auto;
}
You have given the div a specific width in pixels. To make sure it is centred within your page you should apply a margin:0 auto css rule to it so that it will automatically calculate the side margins to center the element.
Be aware that the margin:0 auto technique does not always work. Here are the rules for it to work:
The element must be block-level, e.g. display: block or display: table
The element must not float
The element must not have a fixed or absolute position
The element must not have auto as width value
I've used "margin: 0 auto" on <p>, <a>, and <img> elements inside a float div but it doesn't seem to affect them. Therefore, I manually aligned them by "margin-left." It looks ok but I'd rather apply a uniform rule to all elements in the div. Thank you.
The float div:
#side {
float: left;
width: 300px;
height: 630px;
background-color: white;
border-radius: 10px;
}
If I understand you correctly, you are trying to centrally align all the elements (p, img, and a) inside the floated div.
Out of the 3 html elements you specified, <p> is a block level element, but <img> and <a> are inline elements. In order for you to use margin: 0 auto all the elements should have a width specified. And the width can only be specified for the block level elements.
So you can use the property display: block for the inline elements like a and img which will convert them to a block level element. And then you can specify the width property for all the elements inside the div (including p, a, and img). Once the width for all the elements are specified, now you can use margin: 0 auto and it should work perfectly fine.
If you want the text inside the div to be centrally aligned all the time, then you can use the css property called text-align: center on the div.
The layout inside a container is not affected by whether the container is float or not. That only affects where the container is positioned, not how the child elements inside the container are positioned.
The elements you are trying to use margin on are inline elements, not block elements.
With things like margin: 0 auto, the auto applies to block elements that would normally go full width, not inline elements which will normally be only as wide as their content.
For inline elements, you may want to use text-align: center, but we'd really have to see your exact HTML and the desired layout in order to know exactly what to recommend.
Usually people try to figure out how to vertically center stuff, I want to remove an instance of centered content and align and I'm stuck.
The content of the button (that is placed in a list in a table cell) is vertically centered by default. How can I remove this? How to align the contents of the <button> vertically to the top?
<table>
<tbody>
<td>
<ul>
<li>
<button>
<div>Content</div>
I have an example on jsFiddle.
button {
display: block;
position: relative;
background-color: pink;
width: 100%;
min-height: 200px;
}
<button>
<div>why?</div>
<div>are these centered vertically?</div>
<div>And how to remove it?</div>
</button>
Why the contents are vertically centered?
There's no specific reason. This is the way UAs handle the position of value/content of buttons (including <button>, <input type="button">)1.
How to remove vertical centering?
Well, there's a way to achieve that. First, a little background is needed.
But before that, you should note that <div> elements are supposed to be used where flow contents are expected. This means that they are NOT allowed to be placed inside <button> elements.
As per HTML5 spec (Which is at PR state right now):
Content model for element button:
Phrasing content, but there must be no interactive content descendant.
Therefore, a valid HTML could be like this:
<button>
why? <br>
are these centered vertically? <br>
And how to remove it?
</button>
Background
In an inline flow, inline-level elements (inline, inline-block) can be aligned vertically inside the parent by vertical-align property. Using that with a value other than baseline makes inline-level elements position somewhere other than the baseline of the parent (which is the default place).
The key point is that taller elements would affect the line box / baseline.
The Solution
First, in order to handle the position of the lines, we need to wrap them by a wrapper element like <span> as follows:
<button>
<span> <!-- Added wrapper -->
why? <br>
are these centered vertically? <br>
And how to remove it?
</span>
</button>
In cases that the parent - the <button> in this case - has an explicit height, by any chance if we could have a child element having the exact same height of the parent, we would be able to expand the height of the line box and surprisingly make our desired in-flow child - the nested <span> in this case - be aligned to the top vertically by vertical-align: top; declaration.
10.8 Line height calculations: 'vertical-align' property
This property affects the vertical positioning inside a line box of
the boxes generated by an inline-level element.
top
Align the top of the aligned subtree with the top of the line box.
EXAMPLE HERE
button { width: 100%; height: 200px; }
button > span {
display: inline-block;
vertical-align: top;
}
button:after {
content: "";
display: inline-block;
vertical-align: top;
height: 100%;
}
Last bot not least, if you'd like to use min-height rather than height for the button, you should use min-height: inherit; for the pseudo-element as well.
EXAMPLE HERE.
1 Chrome and Firefox also display the value of text inputs vertically at the middle while IE8 doesn't for instance.
Bootstrap adds padding above and below the button content (6 pixels). You can alter the padding amount with: button{padding:0px;} or button{padding-top:x; padding-bottom:y;} where x and y are whatever value you choose.
If you want to alter that button only give the button id="table" or something like that and then do: button#table{padding:0px;}
If you can avoid using vertical align you should as not all browsers support it.
I just wrote the following code
<img src="http://www.lorempixel.com/100/100"><img src="http://www.lorempixel.com/100/150" id="test">
#test {
text-align: center;
}
But the image is not centering. I also used text-align: right which did not work either. I can use float and margin-left but I'm curious why its not working with text-align.
Have a look at text-align css property as described on w3.org website. It says that this property applies to block containers.
Now, the <img> tag itself is not a container (it cannot contain any thing) hence the text-align property does not work as expected. To make an image center-align, there are various ways; the simplest of them is to specify text-align: center on its parent element.
This property specifies how the inline content of a block is aligned,
when the sum of the widths of the inline boxes is less than the width
of the line box.
Try putting the img in a div with inline-block specified and the first image as the background image of the div.
something like:
<div style="display: block; text-align: center; background-image:url([your_first_image]);">
<img src="[your_second_image]"/>
</div>
However, this probably will not work on an image, you need to use float, padding or something of that nature.
img {
display: block;
margin-left: auto;
margin-right: auto;
}
It should work! It worked for me :D
text-align is used for aligning the text within an element. An img element has no text inside of it to center, so it does nothing. float, which floats the element within its parent, is probably what you want here.
Not the best practice text-align to align images.
"The tricky thing about the text-align property is that you can only align text with it - you can't use it to move block-level elements like images. Some browsers will align images or tables with this property, but it's not reliable, as you've found." --Jennifer Kyrnin, About.com
You can use the deprecated img attribute align="center", Although you won't use. This way tags and style are mixed, and, to worsen, there are vertical and horizontal spaces around the full image.
<img src="http://www.lorempixel.com/100/150" align="center"> <-- Wrong way
The best way to solve this is using CSS. Setting the image as div's background then the div's space will be your image's space and you can use margins to put it in place. You can try to use one of these others techniques
CSS background-image Technique:
background:url('path_to_img') center center no-repeat; /* div center */
background:url('path_to_img') center 0 no-repeat; /* div horizontal center */
background:url('path_to_img') 0 center no-repeat; /* div vertical center */
I try this and it works fine :
In the CSS:
.centreimage {
text-align: center;
}
In the HTML:
<p class="centreimage">
<img src="Images/blababla.png">
</p>
Another way -- you can wrap it around a table. see below.
We had to do it this way in a stylesheet.
<html>
<table border="0" width="530" >
<td align="center" valign="center">
<img src="http://www.lorempixel.com/100/150" id="test">
</img>
</td>
</table>
</html>
Consider learning about the CSS display property, a very important CSS property in my opinion, at least when dealing with positioning and alignment. The property is set to different values on different elements by default. Assuming the position property is set to the static value, block and inline take up the entire parent element's width. block will be on its own line while inline shares the line with other elements.
Elements like p tags and h1s are block level elements. Elements like span tags and ems are inline elements. Images however are neither!
Images have a default display value of inline-block. This means it has the characteristics of inline and block elements - You can set the width and height (like block level elements), it is on the same line as other elements (like inline level elements), and the container is the width and padding - nothing else.
The CSS rule text-align: center; centers the element in its container. This means for p elements it will be fine because the display is set to block. For images, however, you cannot center it (so nothing will happen) unless you put it in a div (parent element container) because, assuming the width is set to 100%, there is nothing to center it in, nothing to be aligned with. Consider the following example:
body * {
border: 1px solid black;
text-align: center;
}
<body>
<p> This is a <span> !!Span element containing!! paragraph !!Span element containing!!</span>about lorem ipsum, the infamous place holder text. Lorem ipsum is supposedly Latin, but not really. That's all. </p>
<img width = '200' src="https://i.stack.imgur.com/zZTPs.png">
<p> The display of p is block, span inline, img inline-block. That's why the image's border doesn't stretch and the others do (you may not notice it but they do)</p>
</body>
A good workaround is setting the display to block. This will make ti stretch so there is something to center it in. As soon as there is something that acts as a parent container, ether it be changing the display (the border is what you are aligning it on) or enclosing it in a div (the div is what you are aligning it on) the aligning will then work.
because it is "text"-align.
the property is designed to work a certain way and given a certain name.
Interestingly, if a the property is applied to a container that has image+text then the alignment works for text as well as image.
.one{
text-align: center}
<div class="one">
<p>hello pal</p>
<img src="https://cn.i.cdn.ti-platform.com/content/22/showpage/regular-show/za/regularshow-200x200.png">
</div>