How to vertically align center .sub-block-2 element (like .sub-block-1) ?
.sub-block-1 should be display=flex
.sub-block-2 should be display=inline-flex
Behavior should be the same as now except .sub-block-1 and .sub-block-2 should be vertically centered
<div class="wrapper">
<div class='holder'>
Some text
<div class="block">
<div class="sub-block-1"></div>
</div>
<div class="block">
<div class="sub-block-2"></div>
</div>
dsdfsd sdfsdf dsfsdfsdf sdfsdfsdf sdfsdf sdfsdf
</div>
</div>
.wrapper {
width: 300px;
}
.holder {
line-height: 30px;
}
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
}
.sub-block-1 {
display: flex;
background: #000;
height: 20px;
width: 60px;
}
.sub-block-2 {
display: inline-flex;
background: #000;
height: 20px;
width: 100px;
}
codepen https://codepen.io/ruvi/pen/yLaryJq
inline elements are a little funky with line height. (thread on how line-height affects inline elements)
Adding line-height: 0; to .block will align both sub-block1 and sub-block2 vertically, although if there's any text inside .block, there will be no extra space between lines.
.block {
display: inline-block;
vertical-align: middle;
overflow: hidden;
line-height: 0;
}
Related
I have enclosed an image inside a nested div .box. If it is not floated the image can be exactly centered to the .box, but when I float it left or right the center alignment goes away! I have 4 images with various sizes that need te be centered inside their own .box. How can I fix it?
HTML
<div class="con">
<div class="box">
<img src="../_images/icon-test.png">
</div>
</div>
CSS
.con {
width:300px;
height:200px;
background: #996600;
}
.box {
position:relative;
width:150px;
height:150px;
background-color: #333333;
display:table-cell;
text-align:center;
vertical-align:middle;
float:right;
}
You can use display: flex for this.
Change your display: table-cell to display: flex.
Then change text-align:center; and vertical-align:middle; to align-items: center; and justify-content: center; to center it vertically and horizontally.
Edit: Then I have also added a max-width of 150px to the image, to stop it expanding out of the container when the image is bigger than it. Props to #Hkidd for pointing out that this happens.
.con {
width: 300px;
height: 200px;
background: #996600;
}
.box {
position: relative;
width: 150px;
height: 150px;
background-color: #333333;
display: flex;
align-items: center;
justify-content: center;
float: right;
}
img {
max-width: 150px;
}
<div class="con">
<div class="box">
<img src="http://placehold.it/200x100">
</div>
</div>
Explanation
I think you have to position the img absolute, so it will be positioned absolute to its parent .box since .box is positioned relative. Also the display: table-cell; is unnecessary since the img is not inside a table.
This is what I came up with:
.con {
background: #996600;
height: 200px;
width: 300px;
}
.box {
background-color: #333333;
float: right;
height: 150px;
position: relative;
width: 150px;
}
.box img {
bottom: 0;
left: 0;
margin: auto;
position: absolute;
right: 0;
top: 0;
width: 90%;
}
<div class="con">
<div class="box center">
<img src="http://placehold.it/120x100">
</div>
</div>
If you have a single image as in the question, you can use the line-height solution which places the image exactly in center of the .box div & use vertical-align: middle on the image. Works on all browsers & simple to understand.
Refer code:
.con {
width: 300px;
height: 200px;
background: #996600;
}
.box {
position: relative;
width: 150px;
height: 150px;
background-color: #333333;
text-align: center;
vertical-align: middle;
float: right;
line-height: 150px;
}
img {
height: 60px;
vertical-align: middle;
}
<div class="con">
<div class="box">
<img src="http://www.w3schools.com/css/img_fjords.jpg">
</div>
</div>
I need three boxes centered and ordered horizontally. Right now I have the centered but only vertically:
Here is the CSS for the box:
.box {
margin-left: auto;
margin-right: auto;
background-color: #9FDCED;
display: block;
height: 400px;
width: 500px;
}
Any help would be greatly appreciated.
Give the .box a display: inline-block and vertical-align: top to make them be aligned next to eachother. If you surround it with a .container <div> that gets text-align: center the inline content gets horizontally centered.
.container {
text-align: center;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 50px;
width: 50px;
vertical-align: top;
}
.box--high {
height: 75px;
}
<div class="container">
<div class="box"></div>
<div class="box box--high"></div>
<div class="box"></div>
</div>
A great resource for horizontal and vertical centering using CSS is https://css-tricks.com/centering-css-complete-guide/
.box1 {
display: table;
margin: 0 auto;
}
.box {
background-color: #9FDCED;
display: inline-block;
height: 200px;
width: 200px;
}
<div class="box1">
<div class="box" style="background:#cc0000;"></div>
<div class="box" style="background:#cceeff;"></div>
<div class="box" style="background:#eeccff;"></div>
</div>
Just add a float:left; to the .box class. Like this
.box {
margin: 5px;
background-color: #9FDCED;
display: block;
height: 100px;
width: 100px;
padding: 5px;
float: left;
}
Working JSFiddle http://jsfiddle.net/wcvgs1zb/
I've searched it at online and found some solution. But, nothing works at my project. At most of the solution, I've found:
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
display: table;
width: 100%;
}
.b {
display: table-cell;
text-align: center;
vertical-align: middle;
}
By applying this technique, I've tried to build something like this: http://jsfiddle.net/L2GZx/1/
The text of left column only needed to be aligned middle vertically. But, it's not working with that technique:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text Sample Text Sample Text Sample Text Sample Text </p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
float: right;
background: #fff;
width: 40%;
padding: 20px;
}
How can I make the text of left-column aligned middle vertically? Note: I can't use any fixed height as content of each row will be different
Remove the floats. Floated elements can not also be displayed as table-cells. See updated Fiddle.
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
display: table;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
.right {
display: table-cell;
background: #fff;
width: 40%;
padding: 20px;
}
.left {
width: 40%;
padding: 20px;
display: table-cell;
vertical-align: middle;
}
removing" float:left " from .left style solves that issue, but using table and div together is not that good.Working Example
An alternative that I prefer in a situation like this is:
To not use display: table-cell, but rather use display:
inline-block.
To then use vertical-align: middle on the element.
Sample (revised) markup / css:
<div class="row">
<div class="left">
<p>Sample Text</p>
</div>
<div class="right">
<p>Text</p>
<p>Input Element</p>
<p>Table</p>
<p>Image</p>
</div>
</div>
CSS:
.row {
width: 100%;
background: #ccc;
border-bottom: 1px solid #999;
}
.row > div {
display: inline-block;
/* below 2 lines are IE7 hack to make inline-block work */
zoom: 1;
*display: inline;
/* below is consolidated css for both left / right divs */
width: 40%;
padding: 20px;
}
.left {
vertical-align: middle; /* or top or bottom */
}
.right {
background: #fff;
vertical-align: top; /* or middle or bottom */
}
All you have to do is to add a line-height to the left column and it will be automatically aligned (without vertical-align so you can remove it).
Here it is:
.left {
float: left;
width: 40%;
padding: 20px;
display: table-cell;
line-height:150px;
}
And here is your updated FIDDLE
Using your first example, try something like this. I'll explain how it works in the CSS.
<div class="a">
<div class="b">
Unknown stuff to be centered.
</div>
</div>
.a {
width: 100%;
position: relative; /* We want our parent div to be the basis of our absolute positioned child div */
/* You can set your height here to whatever you want */
}
.b {
position: absolute;
width: 100%; /* Set to be the full width, so that our text is aligned centered */
text-align: center;
top: 50%; /* Positions the top of the div at 50% of the parent height */
left: 0; /* Assures that the child div will be left-most aligned */
margin-top: -.5em; /* Moves the top of our div up by half of the set font size */
height: 1em; /* Sets our height to the height of the desired font */
}
Here is the JSFiddle link to see a live example: http://jsfiddle.net/L2GZx/20/
This is one of the best solutions to absolutely center text inside of a webpage. It does have it's limitations however seeing how it won't react to other elements inside the same parent and it also has to have a set height. So multiline text will have it's shortcomings with this method.
I hope this helps!
I am trying to simply align two elements vertically, they are inside a div. I have several images that all have different heights.
HTML
<div class="companyBox">
<img src="http://dummyimage.com/145x150/555555/000000&text=image" />
<div class="showPlans">
<p>Show Plans</p>
</div>
</div>
CSS
.companyBox {
height: 250px;
background-color: #999;
text-align: center;
}
.companyBox img {
vertical-align: middle;
}
.companyBox .showPlans {
vertical-align: middle;
}
Here is a http://jsfiddle.net/hQab5/
Thank you for any help, I don't understand why I am having trouble with something that I would have considered simple.
Fiddle
HTML:
<div class="companyBox">
<div class="showPlans">
<img src="http://dummyimage.com/145x150/555555/000000&text=image" />
<p>Show Plans</p>
</div>
</div>
CSS:
.companyBox {
height: 250px;
background-color: #999;
text-align: center;
width: 100%;
display: table;
}
.companyBox img {
vertical-align: middle;
margin: 0 auto;
}
.companyBox .showPlans {
vertical-align: middle;
display: table-cell;
}
Hi all on my page here: http://www.gamingonlinux.com/sales/ i want to align text in the added, price, savings and provider to the top, how would I go about that?
Here is the html for the columns:
<div class="row">
<div class="left">
{:screenshot} {:info}
</div>
<div class="date-column">
{:date}
</div>
<div class="price-column">
{:price}
</div>
<div class="middle">
{:savings}
</div>
<div class="right">
{:provider}
</div>
</div>
And their css:
.left
{
display: table-cell;
padding: 14px;
}
.price-column
{
display: table-cell;
padding: 14px;
width: 150px;
}
.date-column
{
display: table-cell;
padding: 14px;
width: 150px;
}
.middle
{
display: table-cell;
width: 75px;
padding: 14px;
}
.right
{
display: table-cell;
width: 155px;
padding: 14px;
}
Inside the "left" div the screenshot and name are inside floated left and right spans.
Just like on a regular table cell you can use vertical-align:top; to do the alignment.
You just have to add float: left; to your css (.left class) like this
.left
{
display: table-cell;
padding: 14px;
float: left;
}
Easy fix:
.row > div {
vertical-align: top;
}
If I understand your problem try this code. vertical-align is good choice:
display: table-cell;
padding: 10px;
width: 150px;
text-align: center;
vertical-align: top;
More other options for vertical-align is: