This question already has answers here:
How can I make a div not larger than its contents?
(43 answers)
Closed 1 year ago.
I have an element that takes 100% of its container's width:
How do I make it so the width of the element is as wide as the text?
I can't find the answer online because I don't know how to formulate the question proprely.
float: left; works but it messes up the surrounding elements as some of them have this porperty as well. Is there another way?
You can set the display: inline-block OR display: inline (depends on your use case) for the element containing the text like so :
.text {
display: inline;
padding: 10px;
background: firebrick;
}
<div class="text">text</div>
<div class="text">text text text</div>
This question already has answers here:
Why is this inline-block element pushed downward?
(8 answers)
Align inline-block DIVs to top of container element
(5 answers)
Closed 2 years ago.
.d1 {
height: 10px;
}
.dd {
display: inline-block;
overflow: hidden;
}
.dd1 {
display: inline-block;
}
<div class="d1">
<div class="dd"></div>
<div class="dd1"></div>
</div>
unset the overflow the dd and dd1 is in same line. but if set the two divs not has an equal height.
If you take a look at the spec, you may read:
The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.
So what we know as the "baseline" is actually different for inline elements that have an overflow that is something other than visible.
To have them to visually appear inline, I believe you'll need to explicitely style the vertical-align property:
.d1{
height:10px;
}
.dd{
display:inline-block;
vertical-align: bottom;
overflow:hidden;
}
.dd1{
display:inline-block;
vertical-align: bottom;
}
Try this
.d1 {
display: flex;
align-items: center;
}
.dd {
overflow: hidden;
}
This question already has answers here:
How to align entire html body to the center?
(11 answers)
Closed 3 years ago.
Can I calculate with width of <h1> (depends on text) and center this <h1> horizontally in <body>?
Thanks for any help and hint!
Robin Zigmond is correct in their comment. You can center a block-level element by setting it's margin-left and margin-right to auto. It will appear centered if it's width is not 100% of it's parent container:
h1 {
margin-left: auto;
margin-right: auto;
}
If its width is 100% of its parent container, you could use text-align to set the text to center:
h1 {
text-align: center;
}
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Why is this inline-block element pushed downward?
(8 answers)
Closed 3 years ago.
On this code sample,
When I delete the padding on the element with an id of #a, the blue element moves up, and vice versa.
But when I inspect the margins and padding in the Chrome dev tools, it looks like they shouldn't affect each other at all!
Why is the padding of the red element affecting the VERTICAL positioning of the blue element?
I understand why it would affect the horizontal, but the vertical change confuses me!
I've looked into the CSS box model, but it hasn't helped.
* {
font-size: 20px;
}
#a {
background-color: red;
display: inline-block;
box-sizing: border-box;
height: 100px;
width: 150px;
padding: 30px;
}
#b {
background-color: blue;
display: inline-block;
}
<div id="a">
CONTENT
</div>
<div id='b'>
CONTENT
</div>
I expect that changing the padding of the red el wouldn't affect the positioning of the blue el at all!
This question already has answers here:
How to make an image center (vertically & horizontally) inside a bigger div [duplicate]
(36 answers)
Centering image horizontally and vertically [duplicate]
(5 answers)
Closed 9 years ago.
I am trying to horizontally center a large image. Because I am using HTML5, I can't use <center>. I could use left:400px, but that wouldn't work for different screen sizes.
Wrap the image inside an element and use text-align: center;...
Demo
<div class="center">
<img src="http://www.google.com/intl/en_ALL/images/logos/images_logo_lg.gif" alt="Google" />
</div>
.center {
text-align: center;
}
Alternatively if you are aware, that what's the image width, you can also use margin: auto; with display: block; as img tag is inline element by default and of course, the width property
img {
width: 276px;
display: block;
margin: auto;
}
Demo 2
Try this css to horizontally center
display: block;
margin: 0 auto;
= the top and bottom margin 0, and the left and right margin auto
Use CSS text-align: center;. And don't forget to set width on the div or it will look left-aligned.
<div style="text-align: center; width: 100%; border: 1px solid black;">Centered</div>
Depending on your specific situation, this has worked for me on several projects:
<style>
.outer{float: left; position: relative; left: 50%;}
.inner{float: left; position: relative; left: -50%;}
</style>
<div class="outer">
<div class="inner">content you want to center, image, text, whatevs</div>
</div>
The IMG element is inline, by default. So, as the others have pointed, you have two options:
1) Keep it inline, and use text-align: center;.
2) Make it a block element with display: block;, and then use margin: auto;, which works only on block elements. I think this solution is better. Setting the width is just another way to force it to be a block element, but it's less obvious for someone that may read the code later. So explicitly setting the display type to block is better for readability.
If your element has the width property , then give it margin:auto;.