Was wondering if anyone can show me best way to vertically align my image in image col and have the column equal in height to the text col?
CSS
*{padding:0;margin:0;}
.col{
width: 50%;
float: left;
height: 100%;
}
.col-text {
background: silver;
}
.col-img {
background: red;
display: inline-block;
text-align: center;
}
.col-img img {
display: inline-block;
vertical-align: middle;
}
.cf:after{
content:"";
display:table;
clear:both;
}
}
JSFiddle http://jsfiddle.net/LUpmG/1/
This is my version: http://jsfiddle.net/LUpmG/2/
In short, you need to get rid of floats, use display: table-cell, and apply vertical-align: middle to the container.
Related
I have this Page where you can see a bunch of buttons which are 'a' elements.
I need them to have the same height and set the text in the middle. Note that some of them have more than one line of text, then 'line-height' will not work.
I tried this, but not working:
.et_pb_button_module_wrapper .a {
height: 200px;
vertical-align: middle;
display: block;
}
.et_pb_button_module_wrapper .a{
height: 200px;
display: flex;
align-items:center;
min-height:100px;
justify-content:center
}
just use flexbox method and min-height as above.
You can align things in various way one of the good way is using table layout.
.et_pb_button_module_wrapper{
display: table-row;
height: 100px;
}
.et_pb_button_module_wrapper .a{
display: table-cell;
vertical-align: middle;
width: 200px;
height: 100px;
border: 1px solid #000;
line-height: 1.2;
}
table-cell can align it's content in vertical.
I searched over Stackoverflow though many posts but I didn't found the solution.
I'm trying to align my text vertically, using margin: auto;
It seems there is a margin collapsing problem, if you wanna check this example:
// HTML
<div class="outer">
<div class="inner">Hello</div>
</div>
<div class="outer2">
<div class="inner">Trying to center this text vertically</div>
</div>
// CSS
.inner {
margin: auto 0;
height: 20px;
color: white;
}
.outer {
background-color: red;
}
.outer2 {
background-color: blue;
height: 200px;
}
If you want to play on my code, click here
I don't believe there's a good way to vertically align content using margin: auto 0 like you've set it up. To get the inner divs vertically centered, here's a simple way by modifying .inner:
.inner {
height: 200px;
color: white;
line-height: 200px;
}
The display does the magic. Display: table-cell on inner and display: table on outer div. And finally on inner div you put vertical-align: middle or whatever position that you want.
.inner {
display: table-cell;
vertical-align: middle;
height: 20px;
color: white;
}
.outer2 {
text-align: center;
background-color: blue;
height: 200px;
display: table;
width: 100%;
}
I would advise you to use flexbox
add this to outer2 class
.outer2 {
background-color: blue;
height: 200px;
display:flex;
align-items:center;
}
And for horizontal align you can use justify-content:center
align-item:center will align items in center of div vertically ,
.outer2 {
display: flex;
justify-content: center, left;
background-color: blue;
height: 200px;
}
you are trying to align the entire inner div by giving margin:auto. You can use text-align: center if you want to align the text. If you need to align the entire div then mention height and width for inner div. I have posted fiddle link please check
http://jsfiddle.net/ajaycoder/n1rz0bts/4/
.inner {
margin: auto ;
color: white;
width:50%;
border: solid 1px red;
height:50%;
}
On my page the top left logo isn't centered. Here's my code:
.header_col1 {
float: left;
width: 20%;
background: #009240;
text-align: center;
position: relative;
}
.header_col1 a { /* my logo */
display: inline-block;
vertical-align: middle;
}
Yet according to articles I've read this technique should work. Why not in this case? I don't want to use absolute positioning because the green area around the logo descreases in size in smaller resolutions and logo must do so too.
Here is one way of doing it.
Apply display: table-cell to the a element wrapping your image and inherit the width and height from the .header-col1 ancestor block.
You can then use vertical-align: middle and text-align: center to get the alignment that you want. Add some left-right padding if you need some white space at the left and right edges.
Finally, to get the image to act responsively, set width: 100% and use vertical-align: top to take care of the white-space-below-the-baseline issue.
.header_col1, .header_col2 {
height: 110px;
}
.header_col1 {
float: left;
width: 20%;
background: #009240 none repeat scroll 0% 0%;
text-align: center;
position: relative;
}
.header_col1 a {
vertical-align: middle;
display: table-cell;
text-align: center;
width: inherit;
height: inherit;
padding: 0 10px; /* optional if you need left/right whitespace */
}
.header_col1 a img {
width: 100%;
vertical-align: top;
}
<div class="header_col1">
<a id="logo" href="#">
<img src="http://placehold.it/262x78">
</a>
</div>
Use the display table magic trick :-)
.header_col1 {
display:table;
}
.header_col1 a { /* my logo */
display: table-cell;
vertical-align: middle;
}
I would center it with transforms.
.header_col1 a { /* my logo */
display: inline-block;
vertical-align: middle;
position: relative;
padding: .5em;
top: 50%;
transform: translateY(-50%);
}
EDIT: Added padding: .5em; to give the logo some breathing room on smaller screens, when the container starts to shrink.
The new hotness would be this;
.header_col1 {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.header_col1 a { /* my logo */
margin: auto;
}
Note: as time goes by, the vendor prefixes -webkit- -moz- ms- will be not nessacery.
here is a sample: https://jsfiddle.net/w4m50ybd/1/
Bonus: making the image resize to the container is a different question.. however the answer to that is width: 100%; height: auto; in the most simple case.
Try this
.header_col1:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em;
}
.header_col1 a {
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
Codepen Demo
You need to set a line-height equal to the height for the .header_col1 for this technique to work:
.header_col1 {
float: left;
width: 20%;
background: #009240;
text-align: center;
position: relative;
line-height: 110px;
}
.header_col1 a { /* my logo */
display: inline-block;
vertical-align: middle;
}
...and the img needs to be a block-element:
.header_col1 a img {
display: block;
}
Edit:
Add this to retain the flexible sizing:
.header_col1 a {
width: 100%;
}
.header_col1 a img {
max-width: 100%;
}
I have added line-height to the anchor tag.
header_col1 a {
display: inline-block;
vertical-align: middle;
line-height: 10;
}
you can use the table display to align a tag vertically and horizontally. This way is the easiest way to align an element. I did test on your page, it worked perfectly.
.header_col1 {
float: left;
width: 20%;
background: #009240;
text-align: center;
position: relative;
display: table;
}
.header_col1 a { /* my logo */
display: table-cell;
text-align: center
vertical-align: middle;
}
or another way is to use padding to center your element.
.header_col1 a {
padding: 16px 0px;
}
To avoid other headache while changing the size of your navigation in other devices and screen resolution, I recommend the first solution.
I'm trying to set up a display that has an icon centered in a div. To the left and/or right is a variable amount of text. Example:
<div class="container">
<div class="left-text">This text is on the left</div>
<div class="icon-cell"><div class="icon smiley-face"></div></div>
<div class="right-text">And more text is over here...</div>
</div>
My goal would be for icon-cell to always be centered horizontally, presuming .container has a width of 100%.
I was using a table for a little while, but it wasn't possible to do:
<td style="width:50%"></td>
<td style="width:48px"></td>
<td style="width:50%"></td>
Any ideas on how to do this without using Javascript?
CodePen
You could use display: inline-block for the divs in conjunction with text-align: center:
.container {
width: 100%;
background: #eee;
text-align: center;
}
.container > div {
display: inline-block;
}
.container > .icon-cell {
width: 50px;
}
Example
There will occur problems, when you insert more text. Then you need to fix the width of your container-elements and eliminiate white-space between inline-blocks (I use font-size: 0). Here's another example:
More Text
This gives you a clean newspaper kind of look.....
.container {
width: 100%;
height: 300px;
}
.left-text {
position:absolute;
background: rgba(0, 255, 0, .2);
margin-left:0px;
top:0px;
padding-right:350px;
text-align:justify;
text-justify:auto;
}
.right-text {
position:absolute;
background: rgba(0, 0, 255, .2);
margin-right:0px;
top:0px;
padding-left:350px;
text-align:justify;
text-justify:auto;
}
.icon.smiley-face {
background: url(//placehold.it/48/48/00ff00);
height: 48px;
width: 48px;
margin:0px auto;
}
this trick may work
.icon{
width:100px;
margin:0 auto;
}
Use css float and align.
CSS:
.left-text { float: left; }
.right-text { float: right; }
.icon-cell { text-align: center; }
.container { display: inline-block; }
You can just use margins and display: inline-block; in css
I suppose I'm a bit late to the party, but this can also be done using display: table-cell;. Large amounts of texts should wrap rather than push the icon around and if you want padding for the "cells" you won't need to compensate for the width of the centered icon.
.container {
background: #eee;
display: table-row;
}
.container > div {
display: table-cell;
vertical-align: top;
width: 50%;
}
.container > .icon-cell {
min-width: 50px;
width: 50px;
}
.container > .icon-cell img {
width: 100%;
height: auto;
}
http://jsfiddle.net/Ljho1nx9/2/
Assume that I have a div having the following styles:
#container {
position: fixed;
width: 100%;
height: 100%;
}
Also I have an image of unknown size (the size may vary), which I want to align both vertically and horizontally.
What is the best way of doing that?
The background image method will work, with background-position:center center, unfortunately you'll lose control of scaling your image.
You can set your image as follows:
position:absolute;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
PS. Keep in mind that this will be centered relative to its closest positioned parent.
Add the following:
The first two lines center it vertically, the last horizontally.
display: table-cell;
vertical-align: middle ;
text-align: center;
more info can be found here: http://www.w3.org/Style/Examples/007/center
The easiest cross-browser way would be to set your dynamic image as a background property on the #container:
<div id="container" style="background: url(path/to/image.png) no-repeat 50% 50%"></div>
This will center vertically and horizontally.
#container {
text-align: center;
vertical-align: middle;
display: table-cell;
}
http://jsfiddle.net/nfBDT/
i believe the easiest way is to do this:
.container img {
display:block;
margin:auto;
}
adjust .container to suit your div (not sure if yours was a class or ID)
oh I didn't read all of your question.
this appears to work:
<style type="text/css">
.wraptocenter {
display: table-cell;
text-align: center;
vertical-align: middle;
width: ...;
height: ...;
}
.wraptocenter * {
vertical-align: middle;
}
/*\*//*/
.wraptocenter {
display: block;
}
.wraptocenter span {
display: inline-block;
height: 100%;
width: 1px;
}
/**/
</style>
<!--[if lt IE 8]><style>
.wraptocenter span {
display: inline-block;
height: 100%;
}
</style><![endif]-->
full credit: http://www.brunildo.org/test/img_center.html
http://zoffix.com/new/absolute-center-random-width-height.html
This is a pretty decent example. Usually you use table/vertical-align for modern browsers and positioning+%s for IE.