Imagine h1 is inside a div:
Compare two styles: What is the problem with inline-block?
h1 {
display: block;
Width: 150px;
margin: 0 auto
}
h1 {
display: inline-block;
Width: 150px;
margin: 0 auto
}
As their name implies, inline-blocks are laid inline. Auto margins have no effect on inline and inline-block boxes.
This isn't a "downside" or a "problem" with inline-blocks per se; it's just how inline formatting works. There is little reason to use an inline-block for anything other than putting a block container on a line box.
You could wrap inline-block styles around a block. That way you still get to control margins.
.wraper { display: block; margin: 0 auto; }
.content { display: inline-block }
<div class="wrapper"><h1></h1></div>
You may add as many inline blocks and will just work.
Well...a bit late, but still useful, I hope.
First of all: a visual example is here on the Jsfiddle.
Remember that "headings" are block-level elements (see MDN), so the display:block; is somewhat "implicit".
When you add the display:inline-block;, you are in fact removing the "block-level" element status thus making it behave differently: in your specific case, margin: 0 auto means 0-pixels margins on top and bottom, while 0-pixels margin on the left and "whatever it is" on the right. Just like any text on your page. So, you could add something after the <h1> tag, to have it show up inline (of course) with the heading (see JSFiddle example).
On a display:block; element, on the contrary, the left and right margins would be calculated so that the element remains on the center of the parent.
Related
I'm not sure that I understand this aspect of display: block.
If I have two subsequent block elements with set widths that leave enough room for the elements so that they could be side-by-side it would seem like they should be side-by-side. That's not what happens though.
body {
padding: 0;
margin: 0;
}
div {
height: 100px;
box-sizing: border-box;
padding: 0;
margin: 0;
border: 0;
display: block;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.half {
width: 30%;
}
<div class="half left"></div><div class="half right"></div>
From what I understand, there is no concept in the css layout module as a "line" so there's nothing (as w3schools says) as having "all blocks start on a new line".
So what exactly is the part of the spec that describes this behavior?
Note: I know there are many ways to position things side-by-side, from inline-block, to float, to flexbox, I'm looking for an answer that specifically describes what the spec'ed behavior is.
Section 9.4.1 of CSS2.1:
In a block formatting context, boxes are laid out one after the other, vertically, beginning at the top of a containing block.
That's actually all there is to it. To be precise, boxes that participate in a block formatting context are block-level boxes in the normal flow within that context. This includes block boxes (display: block), and any other block-level boxes such as display: table and display: flex (i.e. not the inline-* counterparts), except those that are floated or absolutely positioned as they are taken out of the flow.
The concept of "lines" mostly only pertains to inline formatting contexts, which are described in the following section. You are right in that there is no concept of "lines" in a block layout per se.
So, I've managed to make this CSS work, but I'm not 100% sure why it does. I know that's the classic programmer's scenario. I'd like to know why it does, though, so that I can get better.
Here are the two JSfiddle cases (they're exactly the same but with one line different):
With display:block
With float:left
As you can see, the important line of CSS:
.name::before {
content: '';
background: purple;
position: relative;
float: left; /* OR -display: block;- */
height: 22px; width: 100%;
margin-top: -22px; margin-left: -11px;
padding: 0 0px 0 22px;
}
With display:block, the pseudo-element matches the width of the main element (including the borders and padding. However, with float:left, the pseudo-element actually extends the width of the main element; if you change the padding-left to 11px, the increased width disappears, but the ::before stops short and doesn't include the main element's padding+border. This makes me think that inline elements affect other elements that it doesn't share a line with, as long as they're in the same container. Is that right?
Oddly, if you make change the padding to padding: 0 11px, it doesn't extend the right side of the ::before to the edge of the main element like I thought it would. Why is that?
Thanks!
My opinion is:
display: block;
only display the element in block,
while
float: left;
does push the element to the very left of its parents.
If you want to have all the elements to be in one line,
try to use display: inline;
please take a look at this page.
As you can see there are some "read more" buttons. (translated - "czytaj więcej").
This are just after the excerpts. I want to center this read more button.
I gave the a href ... the following class:
class="readmorebtn"
And this CSS:
.readmorebtn{font-size:23px; text-align:center !important;}
But for some reasons it's not working. Any hints?
You are using a element for your button, so a element is inline by default, so even if you center, the text has no place to get centered,as inline elements don't take 100% horizontal space, so inorder to center the text, you need to make it inline-block or block
.readmorebtn {
display: block;
font-size: 23px;
text-align: center; /* No need of !important here */
}
If you are using inline-block the element will be inline and also block but again, you need to define some width to your inline-block element. Whereas block level element will take up entire horizontal space.
Demo (See what if you don't make it a block level element)
Demo 2 (Making it a block level element)
a element can't have the width because it's an inline element and without width you can't align to center so you should add display: inline-block; or display: block; to your a
.readmorebtn {
display: block;
font-size: 23px;
text-align: center;
}
What is DIV style for HTML center tag?
The HTML:
<div id="something">
Content goes here.
</div>
And the CSS:
#something
{
width: 850px;
margin-left: auto;
margin-right: auto;
}
There is no direct equivalent. The <center> tag not only centers its containing text, but any block element too. You can mimic each of those separately, but not simultaneously.
For centering any inline/inline-block content (text, images, videos etc) you would use apply the following to a div or other block element:
.center {
text-align: center;
}
For centering a block element itself, use this:
.blockcenter {
width: 200px;
margin: 0 auto;
}
Obviously replace 200px with the desired width of the block, and 0 with whatever value you prefer for the top/bottom margins. Also note you should generally use class names that describe the element, not its presentation.
You just need to use margin: auto; to center a div. It doesn't technically matter whether it's internal/embedded, or external.
As the comment below points out, however, this will not work in inline elements.
As mentioned above, text-align: center; would be used to center text within an element.
margin: 0 auto; will only center something in CSS if you also add a width specifier. Without width it won't work - it will be placed on the left. But this means it is not equivalent to the <center> tag, for which you did not need to specify any widths. And IF you know the width of something, and have to bother to specify it in a CSS sheet, one line for each of your objects on the page (that have different widths), then you may as well just give the left margin. (software: HTML5, linux, Firefox 31)
CSS is hopeless in not centering. (Presentation language? Rubbish!)
To center a div tag on your page you would use this code. If you want the text centered within the content div you then add text-align:center; to the #content ID style
#wrapper{
background:#444;
}
#content{
width:960px;
margin:0 auto;
background:whitesmoke;
}
<div id="wrapper">
<div id="content">test</div>
</div>
If you have:
{
position:absolute;
}
you will need to delete it before the margin styles take effect.
I have an H3 heading that I'd like to style as having a particular background color, but without having the element's background take up the full width of the parent element. Seeing as H3 is by default a block element, my style would need to change the element to an inline-block element, or just an inline inline element like so:
h3 {
background-color: #333;
color: white;
display: inline-block;
}
This will work fine, but only if it is immediately followed by a block element. I do not want to change the markup just to cater for this style, so I was wondering if there is a way to cause any adjacent element, irrespective of how it displays, to start on the next line?
Assume I can use CSS3.
try this:
h3:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
display:block;
width:auto;
This will make the width as small as possible (not filling the whole parent element) and make other elements appear below.
How often does it happen that the element after the <h3> is an inline element? (Usually after a header there should be like a <p>, <ul> or other block elements, although this totally depends on your html. Is it predictable? Is it an option to just turn every element that directly follows a <h3> into a block element?
h3 ~ * { display: block }
The only other way I know to have a block-element not take up all the space is floating it, but this leaves another problem.
I come across this all the time in my code, usually for div's that are inline-block'ed. The best way I've seen is to force a new line is to wrap your code in an additional div. Your original html gets the formatting you expected and the div wrapper forces a new line.
Assuming this is your h3 styling,
h3 {
display: inline-block;
}
Then just wrap it in a div.
<div>
<h3>My heading</h3>
</div>
I've had to do something similar with inline nav items that need breaking at certain points. Does this work?
h3:after {
content: "\A ";
line-height: 0;
white-space: pre;
display:inline-block;
}
I seem to remember IE7 having an issue with it.
If you don't need to center h3, this may help:
h3 {
background-color: #333;
color: white;
display: inline-block;
float: left;
clear: left;
}