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 3 years ago.
I have two divs side by side in inline-block style. When changing overflow on hover from hidden to visible using pure CSS, why do divs change position?
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
.overlaping:hover {
overflow: visible;
}
.wrapper {
height: 200px;
width: 100%;
background: lightblue;
}
<div class="wrapper">
<div class="overlaping">
Some longer text
</div>
<div class="overlaping">
Other div
</div>
</div>
I know inline-block is causing it, but is there some way to mitigate changing position and keeping the display inline-block at the same time?
By default inline-blocks have vertical-align: baseline, which is why it jumps around if another height changes. To fix this, add
.overlaping {
vertical-align: top;
}
Probably you should change the height instead of the overflow setting.
Also add the min-height and float to the boxes.
.overlaping{
width: 14.2%;
min-height: 50px;
height: 50px;
font-size: 1rem;
display: inline-block;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background:yellow;
overflow:hidden;
float: left;
}
.overlaping:hover{
height: auto;
}
.wrapper{
height:200px;
width:100%;
background:lightblue;
}
<body>
<div class="wrapper">
<div class="overlaping">
Some longer text ddg dfg sdfg sdfg sdfgsdfgsdfgsdfg sdfgsdfgsd fgsd fgsd fgsdfgsdfgs dfg sert sertsertsertgs dfgsdfg dfgsdfg
</div>
<div class="overlaping">
Other div
</div>
</div>
</body>
Modify .overlapping style as shown below
.overlaping {
width: 14.2%;
height: 50px;
font-size: 1rem;
float:left;
margin-right:5px;
text-align: center;
line-height: 200%;
color: black;
position: relative;
background: yellow;
overflow: hidden;
}
Related
This question already has answers here:
Align inline-block DIVs to top of container element
(5 answers)
Closed 3 years ago.
When I place any content inside the first div of three below, (which are displayed as inline-block), the first div moves out of position to the next line.
.container-testimonials {
text-align: center;
background: teal;
margin: 20px auto;
font-size: 0;
}
.clients {
padding-top: 60px;
}
.clients h3 {
font-size: 2rem;
font-weight: normal;
}
.box8,
.box9,
.box10 {
display: inline-block;
height: 250px;
width: 31.3%;
background-size: cover;
margin: 1%;
background: #F25E5E;
border-radius: 10px;
}
.box8 p {
color: #000;
font-size: 1rem;
}
<div class="container-testimonials">
<div class="clients">
<h3>WHAT CLIENTS SAY</h3>
</div>
<div class="box8">
<p>Text</p>
</div>
<div class="box9"></div>
<div class="box10"></div>
</div>
I am fairly sure this has to do with the extra white space the <p> tag adds to the width of each div block, which is set to 31.3%, with the other 1% going to padding and the 2/3% going to the other two divs.
Adding vertical-align: top; to your boxes alignes them on top correctly.
Add vertical-align:top; on .box8,.box9,.box10
.box8,
.box9,
.box10 {
display: inline-block;
height: 250px;
width: 31.3%;
background-size: cover;
margin: 1%;
background: #F25E5E;
vertical-align:top;
border-radius: 10px;
}
https://jsfiddle.net/lalji1051/0a94m5tn/1/
In this style of using line-height and inline-block, why is the green item a few pixels below the middle? Shouldn't there be exactly 15px above and below?
.container{
height: 45px;
line-height: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 15px;
background-color: green;
vertical-align: middle;
display: inline-block
}
<div class="container">
<div class="item">
</div>
</div>
I know there are other ways of vertically aligning items (including JS, absolute positions, and many more). I'm not trying to solve the general "how to vertically align a div".
The culprit here is not so much the line-height, but rather the vertical-align: middle. It tries to align your box with the text that may hypothetically be inside the parent box. Where the inner box ends up depends on the font-size of that text. You can push the box further down by increasing the font-size of its parent:
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 45px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
As you can see, the text is closer to the bottom of its container than to the top (the "j" overflows the container while the "b" does not).
In the same way, you can move the box closer to the center by decreasing the font-size. Since you asked in comments, here's how you get it optimally centered with this method: Set font-size to 0 on the container.
.container{
height: 45px;
width: 100%;
line-height: 45px;
font-size: 0px;
background-color: red;
display: inline-block
}
.item{
height: 15px;
width: 40px;
background-color: green;
vertical-align: middle;
display: inline-block;
}
<div class="container">
job
<div class="item">
</div>
</div>
Changes in your style may help you
.container {
background-color: #ff0000;
display: table-cell;
height: 45px;
vertical-align: middle;
}
.item {
background-color: #008000;
display: table-cell;
height: 15px;
vertical-align: middle;
width: 15px;
}
Please use dividable size to make this work. Also remove vertical align attribue
https://jsfiddle.net/guc6uxc7/
.container{
height: 42px;
line-height: 42px;
background-color: red;
display: inline-block
}
.item{
height: 12px;
width: 12px;
background-color: green;
display: inline-block;
}
I have two divs displayed using display: inline-block, in order to have them next to each other. This works when neither of the divs have text in them. However, when I put text in one div, it moves it down dramatically, while the other keeps the same position. This happens regardless of what div I put the text in; if I put it in both, however, only the left div will go down.
Here's a codepen to show what I mean: http://codepen.io/anon/pen/MwEKPp
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
#main_container {
width: 1000px;
height: 95%;
margin: 0 auto;
font-size: 0px;
}
#logo {
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
<div id="main_container">
<div id="logo_title_area">
<div id="logo">
test
</div>
<div id="title_area">
test
</div>
</div>
</div>
Entering text into the divs labelled logo and title_area will produce the effect I'm talking about.
Does anyone have any idea how to fix this? I need them to remain side-by-side regardless of their contents. Thanks in advance!
It's just missing the vertical alignment, the default value is baseline.
E {
display: inline-block;
vertical-align: top;
}
#logo, #title-area {
vertical-align: top;
}
I just added overflow:auto; for both of the divs and it worked
#logo {
overflow:auto;
display: inline-block;
height: 200px;
width: 200px;
background-color: aqua;
font-size: 20px;
}
#title_area {
overflow:auto;
display: inline-block;
font-size: 20px;
height: 200px;
width: 800px;
background-color: rgb(60,105,123);
font-family: "open sans";
font-size: 60px;
}
This question already has answers here:
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Center Text Vertically Within <DIV>
(7 answers)
Closed 8 years ago.
<div style="background: url('theImages/talentQuote.png') no-repeat center; background-size: 100% 100%; min-height: 125px; min-width: 125px; text-align: center; vertical-align: middle;">
<span style="color: #FFF; font-weight: bold;"><xsl:value-of select="txtQuote" /></span>
</div>
Displays this:
How can I modify the CSS, so the quote is always centered within the background image
Try this:
<div class="bubble">
<p>blablabla</p>
</div>
.bubble {
position: absolute;
background: #cccccc;
width: 135px;
height: 84px;
display: table;
}
.bubble p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
here is a fiddle: http://jsfiddle.net/hLwzymmL/
It depends whether you want to center horizontally or vertically:
Horizontally you should give these styles to the object:
For text only:
#parent {
text-align: center;
}
For objects other than text:
#child {
margin-left: auto;
margin-right: auto;
}
or:
#child {
margin-left: 0 auto;
}
Vertically it's a bit more difficult, you have to set display: table to the parent and display: table-cell to the child, so that you can set the style vertical-align: middle to the child.
#parent {
display: table;
}
#child {
display: table-cell;
vertical-align: middle;
}
JSFiddle demo
You can simply set your outter container to have display:table; and your inner container to have display:tabe-cell;
div{
display:table;
text-align: center;
}
span{
display:table-cell;
vertical-align: middle;
}
vertical-align: middle; only works on table elements.
demo - http://jsfiddle.net/victor_007/hLwzymmL/1/
.bubble p {
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
}
Do it like this:
HTML markup:
<div class="wrapper">
<span class="middleelement">This is some text..</span>
</div>
CSS:
div.wrapper {
background: #008000;
background-size: 100% 100%;
text-align: center;
display: table;
width: 100%;
height: 285px;
}
.middleelement {
color: #FFF;
font-weight: bold;
display: table-cell;
vertical-align: middle;
}
Se the demo here:
http://jsfiddle.net/e16uhcrz/2/
I have a header on my site, and this has a container and three divs.
The heading container is 100px high.
The first div floats to the left and has a width of 150px
The second div floats to the right and has a width of 150px
The third div has another div inside it, and by default resizes to fill the remaining space.
I want the third div to center vertically. When I add display: table-cell and vertical-align: middle the div shrinks to the size of the text. I can only resize the div using a fixed size.
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
display: table-cell;
vertical-align: middle;
height: 100px;
text-align: center;
width: auto;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
Can anyone let me know how I can center the middle div without knowing the exact width?
If I take out the display: table-cell from the heading class it is no longer centered vertically but is horizontally.
I think this might be what you're looking for... I changed div.header in the css to have padding on top, removed the table-cell and also set the margin to auto instead of width auto. See if this is what you were hoping for. You will have to adjust the padding on top depending on the spacing but this seems like the easiest way to me.
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
width: 100%;
height: 100px;
text-align: center;
background-color: #000;
margin-bottom: 10px;
margin-left: auto;
margin-right: auto;
}
div.heading
{
height: 100px;
text-align: center;
margin: auto;
padding-top:40px;
}
div.leftimg
{
width: 150px;
float: left;
}
div.rightimg
{
width: 150px;
float: right;
}
<div id="headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading">Content to be centered horizontally and vertically</div>
</div>
I have now found an answer that works for me.
First a small change to the HTML (two extra divs in the heading):
<div id="#headingcontainer">
<div class="leftimg">Left</div>
<div class="rightimg">Right</div>
<div class="heading"><div><div>Content to be centered horizontally and vertically<div></div></div>
</div>
Then change to the CSS:
#headingcontainer
{
border: none;
border-bottom: 2px solid #8c8cd4;
background-color: #000;
margin-bottom: 10px;
width: 100%;
height: 100px;
}
div.heading
{
display: table;
border-collapse: collapse;
width: 100%;
height: 100px;
position: absolute;
}
div.heading div
{
display: table-row;
}
div.heading div div
{
display: table-cell;
text-align: center;
vertical-align: middle;
}
This allows the final div contain the text to be both centered vertically and also horizontally. The help came from another Stack Overflow question I found after more searching - 818725.
try this http://jsfiddle.net/KtgVN/20/