I have 3 divs displayed inline-block that horizontally align:
div {
background:blue;
height:200px;
width:30%;
margin:0px;
padding:0px;
border:10px solid red;
display:inline-block;
box-sizing:border-box
}
When I add a text element into one of the divs, it's bumped down *(unless the text is position:absolute;).
What is the reason for this?
http://jsbin.com/suweba/2/edit
You need to add vertical-align: top to your div using CSS. The default property of vertical-align is baseline which is why your div with the content moves down to the bottom.
Here's a jsBin demo.
div {
background: blue;
height: 200px;
width: 30%;
margin: 0px;
padding: 0px;
border: 10px solid red;
display: inline-block;
vertical-align: middle;
box-sizing: border-box
}
#b {} text {
/* position:fixed; */
color: white;
font-size: 20px;
}
<body>
<div id="a">
<text>hello</text>
</div>
<div id="b"></div>
<div id="c"></div>
add vertical-align: top when using display: inline-block. The natural position of inline-block is baseline.
JSBIN
Related
I'm trying to center these 3 floated divs on the same line. Here is a link to jsfiddle:
https://jsfiddle.net/dtps4fw8/2/
any suggestions?
HTML:
<div class="content">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
CSS:
.box {
width: 30%;
height: 200px;
float: left;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
See this fiddle
To make the 3 divs centered, first of all, remove the floatproperty and then to apply the floated effect, use display:inline-block. inline-block display gives a textual characteristics to the div. A text-align:center for the parent div would center these inline-block elements inside the parent.
Update your CSS as follows
.box {
width: 30%;
height: 200px;
display: inline-block;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;
}
.content {
text-align: center;
}
First the float:left; is not relevant in your case, just like Lal said, instead of float:left; its should be display:inline-block; and you can also add a relative positioning position:relative;
I use flexbox. Very minimal and responsive.
.content {
width:100%;
display: flex;
flex-direction:row;
flex-wrap:wrap;}
.box {
height: 200px;
flex:1;
background: gray;
border: black solid 2px;
box-sizing: border;
margin: 5px;}
I have some html as given in code below.
I am using display:table and display:table-cell for laying out the divs in a table-like manner without using html table. This works fine except that the widths of left and right cells are much bigger than the width of their contents.
A demo for this question is at following URL: http://js.do/sun21170/87371
Question: What CSS I can use to make the left and right cells automatically resize to their contents? I do not want to specify the widths of these cells.
I tried to solve this problem by setting the center div width to 100% which did what I was after but then the margins of left and right divs are not respected. So may be there is a better solution that I am missing!
HTML Markup
<script></script>
<style>
#rgcmd {
width:100%;
display:table;
position:relative;
border:solid 1px green;
}
.leftCell {
margin-right: 5px;
height:100%;
display:table-cell;
vertical-align:middle;
border-right:solid 1px red;
}
.rightCell {
margin-left:
5px;height:100%;
display:table-cell;
vertical-align:middle;
border-left:solid 1px red;
text-align:right;
}
</style>
<div id="rgcmd">
<div class="leftCell">Go Left</div>
<div style="display:table-cell; vertical-align:top;">
<span id="status">Your status is offline</span>
</div>
<div class="rightCell">Go Right</div>
</div>
Add white-space: nowrap to the left and right cells and width: 100% to the center cell:
#rgcmd {
width: 100%;
display: table;
position: relative;
border: solid 1px green;
}
.leftCell {
padding-right: 5px;
height: 100%;
display: table-cell;
vertical-align: middle;
border-right: solid 1px red;
white-space: nowrap;
}
.rightCell {
padding-left: 5px;
height: 100%;
display: table-cell;
vertical-align: middle;
border-left: solid 1px red;
text-align: right;
white-space: nowrap;
}
.centerCell {
width: 100%;
display: table-cell;
vertical-align: top;
}
<div id="rgcmd">
<div class="leftCell">Go Left
</div>
<div class="centerCell">
<span id="status">Your status is offline</span>
</div>
<div class="rightCell">Go Right
</div>
</div>
I was asked to code an unusual shape background on some centered text.
The text should be centered and have it's background extend to the right edge of the content-box.
How can I do this with CSS?
http://jsfiddle.net/7U688/
The text centering is cake.
The tricky bit is extending the background off into one direction.
This is one way of accomplishing this:
#outer{
border:2px solid black;
background-color:red;
overflow:hidden;
}
#inner{
margin:40px;
text-align:center;
}
p{
display:inline-block;
color:white;
background-color:black; // or an image
margin:0 -999em 0 5px;
padding: 5px 999em 5px 5px;
line-height:1;
}
In this case - I use a huge padding and an equally huge negative margin to keep an element in flow, but visually extend outside of its borders. A benefit of this technique is that it allows the dev to keep an element in normal static or relative position.
Finally, use overflow:hidden in a parent element to prevent unwanted bleed.
Using :after, you may do something like THIS.
This allows the text to be centered normally without using margin and padding hacks.
p {
display: table;
background: black;
margin: auto;
color: white;
position: relative;
font-size: 1em;
}
p:after {
content: '';
background: black;
width: 150px;
line-height: 1em;
height: 100%;
display: inline-block;
position: absolute;
}
Is this what you want? Fiddle
Html:
<div class="wrapper">
<span class="text">You text</span>
</div>
Css:
.wrapper {
width: 200px;
height: 200px;
border: 1px solid;
text-align: center;
vertical-align: middle;
display: table-cell;
}
.text {
background: yellow;
}
To Put it simple, I would like a header with two elements floating to each side and vertically centered:
I started out with doing this with non-floating elements and managed to make this example.
But once I add the float:left or float:right the vertical centering is lost (I understand why, because it's not part of the flow anymore)
I wonder what is the best method to achieve this. Complete CSS redesign is happily accepted.
Thanks in Advance!
Vertical centering can be painful, especially when you are not dealing with inline elements. In this case, I would recommend taking advantage of display:table-cell.
HTML
<div id="wrapper">
<div class="cell">
<div class="content">
Content Goes here
</div>
</div>
<div class="cell">
<div class="content2">
<div class="redbox">
</div>
</div>
</div>
</div>
CSS
#wrapper {
color: white;
display: table;
border: 1px solid darkblue;
background: blue;
width: 100%;
}
.cell {
display: table-cell;
vertical-align: middle;
height: 200px;
}
.content {
float: left;
}
.content2{
float: right;
}
.redbox {
border: 2px solid darkred;
background: red;
height: 75px;
width: 75px;
}
Example: http://jsfiddle.net/YBAfF/
Add text-align:right to parent div, it makes child elements to align right side. Now add float:left to #text
#parent {
border: 1px solid black;
display: block;
line-height: 400px;
height: 400px; text-align:right
}
#text {
display: inline-block;
border: 1px dashed black;
height: 100%; text-align:left; float:left
}
#logo {
border: 1px dashed black;
height: 90%;
line-height: 90%;
vertical-align: middle;
display: inline-block;
}
#logo img {
border: 1px dashed red;
height: 100%;
}
DEMO
Here's a sample jsfiddle and the same code below. When you set the height of an element, you can set the same line-height to nested elements and they'll expand to the height. Vertically centering the content.
HTML
<div id="wrapper">
<div id="left">left</div>
<div id="right">right</div>
</div>
CSS
#wrapper{
margin:0 auto;
width 960px;
background: #eee;
height:50px;
}
#left{
float:left;
background:#ccc;
line-height:50px;
}
#right{
float:right;
background:#ddd;
line-height:50px;
}
You should add a wrapper around the elements you want to center and float them inside the wrapper. Something like that:
HTML
<div class="center">
<p class="left">Some text goes here</p>
<img src="/path/toimage" alt="My image" class="right">
</div>
CSS
.center {
margin:0 auto;
width: 400px;
}
.right {
float: right;
}
.right {
float: left;
}
Of course, this is a very simple example. You can change the values and CSS according to your needs.
I have a div (#wrapper) containing 2 divs standing side by side.
I would like the right-div to be vertically aligned. I tried vertical-align:middle on my main wrapper but it is not working. It is driving me crazy!
Hope someone can help.
http://cssdesk.com/LWFhW
HTML:
<div id="wrapper">
<div id="left-div">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
<div id="right-div">
Here some text...
</div>
</div>
CSS:
#wrapper{
width:400px;
float:left;
height:auto;
border:1px solid purple;}
#left-div{
width:40px;
border:1px solid blue;
float:left;}
#right-div{
width:350px;
border:1px solid red;
float:left;}
ul{
list-style-type: none;
padding:0;
margin:0;}
You'll have no luck with floated elements. They don't obey vertical-align.
You need display:inline-block instead.
http://cssdesk.com/2VMg8
Beware!
Be careful with display: inline-block; as it interprets the white-space between the elements as real white-space. It does not ignores it like display: block does.
I recommend this:
Set the font-size of the containing element to 0 (zero) and reset the font-size to your needed value in the elements like so
ul {
margin: 0;
padding: 0;
list-style: none;
font-size: 0;
}
ul > li {
font-size: 12px;
}
See a demonstration here: http://codepen.io/HerrSerker/pen/mslay
CSS
#wrapper{
width:400px;
height:auto;
border:1px solid green;
vertical-align: middle;
font-size: 0;
}
#left-div{
width:40px;
border:1px solid blue;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
#right-div{
width:336px;
border:1px solid red;
display: inline-block;
font-size: initial;
/* IE 7 hack */
*zoom:1;
*display: inline;
vertical-align: middle;
}
You can do this quite easily with display table and display table-cell.
#wrapper {
width: 400px;
float: left;
height: auto;
display: table;
border: 1px solid green;
}
#right-div {
width: 356px;
border: 1px solid red;
display: table-cell;
vertical-align: middle;
}
EDIT: Actually quickly messed around on CSS Desk for you - http://cssdesk.com/RXghg
ANOTHER EDIT: Use Flexbox. This will work but it's pretty outdated - http://www.cssdesk.com/davf5
#wrapper {
display: flex;
align-items: center;
border:1px solid green;
}
#left-div {
border:1px solid blue;
}
#right-div {
border:1px solid red;
}
I realize this is an ancient question however I thought it would be useful to post a solution to the float vertical alignment issue.
By creating a wrapper around the content you want floated, you can then use the ::after or ::before pseudo selectors to vertically align your content within the wrapper. You can adjust the size of that content all you want without it affecting the alignment. The only catch is that the wrapper must fill 100% height of its container.
http://jsfiddle.net/jmdrury/J53SJ/
HTML
<div class="container">
<span class="floater">
<span class="centered">floated</span>
</span>
<h1>some text</h1>
</div>
CSS
div {
border:1px solid red;
height:100px;
width:100%;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.floater {
float:right;
display:inline-block;
height:100%;
box-sizing: border-box;
}
.centered {
border:1px solid blue;
height: 30px;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
h1 {
margin:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
.container:after, .floater:after, .centered:after, h1:after {
height:100%;
content:'';
font-size:0;
vertical-align:middle;
display:inline-block;
box-sizing: border-box;
}
I do my best to avoid using floats... but - when needed, I vertically align to the middle using the following lines:
position: relative;
top: 50%;
transform: translateY(-50%);
A possible solution is to make wrapper div flex with items aligned on center as specified by https://spin.atomicobject.com/2016/06/18/vertically-center-floated-elements-flexbox/.
The only downfall of my modifications is you have a set div height...I don't know if that's a problem for you or not.
http://cssdesk.com/kyPhC