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 2 years ago.
I've removed text from the 9th div and got an unexpected result. The same happens while I remove text from other divs. I think the problem is in display: inline-block.
Here is my HTML and CSS example of the problem:
.relative {
position: relative;
width: 80px;
height: 80px;
background: red;
display: inline-block;
}
<div class="relative">1</div>
<div class="relative">2</div>
<div class="relative">3</div>
<div class="relative">4</div>
<div class="relative">5</div>
<div class="relative">6</div>
<div class="relative">7</div>
<div class="relative">8</div>
<div class="relative"></div>
<div class="relative">10</div>
That's because of the default vertical alignment at the baseline of inline-block elements. If there is no content, the alignment will be along the bottom of the element (= aligned with the text baseline of the others).
Use vertical-align: top; to avoid that:
.relative {
position: relative;
width: 80px;
height: 80px;
background: red;
display: inline-block;
vertical-align: top;
margin-bottom: 3px;
}
<div class="relative">1</div>
<div class="relative">2</div>
<div class="relative">3</div>
<div class="relative">4</div>
<div class="relative">5</div>
<div class="relative">6</div>
<div class="relative">7</div>
<div class="relative">8</div>
<div class="relative"></div>
<div class="relative">10</div>
Related
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
How can I vertically align elements in a div?
(28 answers)
Closed 1 year ago.
This is part of the code for a website template I developed a few years ago:
.container {
display: block;
border: 3px;
}
.infosp1 {
display: table;
width: 700px;
margin-bottom: 20px;
margin-top: 20px;
bottom: 30px;
}
.infosp1 div:nth-child(2) {
display: table-cell;
text-align: left;
}
div:nth-child(3) p {
width: 90px;
height: 200px;
margin-top: -10px;
}
div img {
height: 86px;
}
.infosp2,
.infoprice {
display: table-cell;
columns: 2;
padding: 20px;
color: #FFF;
background-color: red;
}
.caravanprice {
width: 50px;
font-weight: 800;
text-align: right;
}
<div class="container">
<div class="infosp1">
<div class="infosp2">Hotel de Paris</div>
<div class="infoprice">€200</div>
</div>
<div class="infosp1">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/H%C3%B4tel_Ville_Paris.jpg/1200px-H%C3%B4tel_Ville_Paris.jpg"></div>
<div>
<p>This Paris hotel has everything you need</p>
</div>
</div>
<div class="infosp1">
<div class="infosp2">Hotel de Paris</div>
<div class="infoprice">€200</div>
</div>
<div class="infosp1">
<div><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/76/Hotel_Paris.jpg/1200px-Hotel_Paris.jpg"></div>
<div>
<p>This Paris hotel was excellent value</p>
</div>
</div>
</div>
The template works, but the text does not align evenly with the images, it's right at the bottom of the div after div.infosp1.
I tried margin-top with -10px; did not work at all.
I could use tables but I've got the header to work how I needed it to.
My biggest problem is trying to get everything to align evenly, and margin-top didn't work.
This relates to DIVs within the container element of a DIV.
As it is, this is a template that I'm testing which works OK but would really appreciate some help to get this looking and working better.
One way to fix it is to add vertical-align to the div that contains a caption. Using flexbox will be even better.
<div class="caption-container">
<p>This Paris hotel was excellent value</p>
</div>
.caption-container {
vertical-align: middle;
}
This question already has answers here:
How to get rid of extra space below svg in div element
(9 answers)
Closed 4 years ago.
.wrapper {
width: 100px;
height: 100px;
overflow: auto;
background: red;
}
.inner {
width: 300px;
height: 150px;
background: blue;
}
<div class="wrapper">
<svg class="inner"></svg>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
see the demo above.
when scroll to the bottom, there is a red gutter which is the background of wrapper in case 1 and case 2 works fine.
Does anyone knows why and how to fix it?
The SVG is an image, so it behaves like any <image> and sits on the text baseline. So the space you are seeing is the space left below the text baseline for descenders etc.
To fix, just make the SVG display: block.
The second version works fine because <div>s are already display: block.
.wrapper {
width: 100px;
height: 100px;
overflow: auto;
background: red;
}
.inner {
display: block;
width: 300px;
height: 150px;
background: blue;
}
<div class="wrapper">
<svg class="inner"></svg>
</div>
<div class="wrapper">
<div class="inner"></div>
</div>
seems duplicate with this question
add display: block; to the svg element could solve the problem
This question already has answers here:
How can I vertically align elements in a div?
(28 answers)
Closed 6 years ago.
I'm currently writing a RSS parser and I use Ractive to generate the view. I'm trying to vertically align the contents of .feed-text-offset according to the height of .feed-item.
How can I accomplish this?
Demo: https://jsfiddle.net/zzx5L4e9/
The output HTML is like this:
<div class="feed-item">
<div class="news-img-container">
<img class="news-thumbnail" src="#" style="max-width: 125px;">
</div>
<div class="feed-text-offset">
Text here
<span class="feed-item-since">1 hr</span></div>
<div style="clear: both;">
</div>
</div>
CSS
.feed-item {
padding: 2px;
background-color: green;
float:left;
}
.feed-item-since {
font-size: 0.8em;
font-weight: 400;
margin-top: 5px;
display: block;
}
.news-img-container {
width: 125px;
float: left;
}
.feed-text-offset {
margin-left: 130px;
}
Found my answer from https://stackoverflow.com/a/31078418/969894 and thanks #GCyrillus
I can apply the following to .feed-item and re-adjust the text offset to vertically align the contents of .feed-text-offset
display: flex;
align-items: center;
This question already has answers here:
How to center an element horizontally and vertically
(27 answers)
Closed 7 years ago.
This is probably not too difficult, but for some reason - I've tried a couple of different solutions - I have some problem getting it right. I have two different div elements, a header and a textfield, that I want to center both horizontally and vertically in the middle of an enclosing div element. The header should be above the textfield.
The enclosing div element has fixed proportions, but the header varies in length and can take up just one line or more than one line.
How can I achieve this?
The HTML:
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
In CSS, I have tried various combinations of text-align: center, vertical-align: middle, left/right/top/bottom: 0 + margin: auto, etc, but so far I have only been able to center the divs horizontally.
In some of my solutions I have even tried having a fourth div element in between the outer and the inner ones.
You can do this using display:flex:
#square {
display: flex;
align-items: center; /*horizontal centering*/
justify-content: center; /*vertical centering*/
flex-direction: column; /*keep the h3 above the textbox*/
/* these are for demo only*/
width: 400px;
height: 400px;
border:1px solid red;
}
h3 {
margin-top:0; /* removing margin otherwise you'll get someone commenting the h3 isn't vertically centered*/
}
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
Does this work?
#square {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 1px solid #ccc;
}
<div id="square">
<div id="header">
<h3>header</h3>
</div>
<div id="textfield">
<input id="textfield" type="text">
</div>
</div>
This question already has answers here:
Align two inline-block div with content
(2 answers)
Closed 7 years ago.
Desired result: The two divs with class inline should be on the same horizontal level (the second one contains two other divs with some content).
However, as can be seen below, the two divs are not aligned vertically. If I remove the content (the word "text") from both the .inside divs, they line up as expected.
How can I make them line up? What is causing this?
.inline,
.inside {
margin: 0;
padding: 0;
width: 100px;
height: 100px;
}
.inline {
display: inline-block;
background-color: chartreuse;
}
.inside {
height: 48px;
background-color: salmon;
border: solid 1px black;
}
<div class="inline">
</div>
<div class="inline">
<div class="inside">text</div>
<div class="inside">text</div>
</div>
<hr>
<div>Without content (i.e. the word "text"):<div>
<div class="inline">
</div>
<div class="inline">
<div class="inside"></div>
<div class="inside"></div>
</div>
.inline {
vertical-align: top;
}
Thanks everybody.