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/
Related
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%;
}
Simple question: I've got two divs, I want them side by side, like this:
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
float: left;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
The question is, can I have the same effect using float in only one if the divs? The specific issue is, the yellow div can contain float: left, the silver div can't. I want to achieve the same effect without using float on the silver div.
How can I achieve it?
Here's a fiddle
Use display:inline-block to achieve what you want.
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
display:inline-block;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
UPDATED FIDDLE
You can use display: inline-block for the silver div
http://jsfiddle.net/94Lxd5c4/
.details-right {
background: silver;
width: 50%;
display: inline-block;
}
Or you may just define overflow: hidden; or overflow: auto; . The behaviour of the silver div will be the same, whether you add float: left or not (it won't do any difference)
http://jsfiddle.net/ogwvjjs9/2/
.details-right {
background: silver;
width: 50%;
overflow: auto;
}
.details-left {
background: yellow;
float: left;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
position : absolute;
left : 50%;
}
<div class="details-left">left</div>
<div class="details-right">right</div>
I hope this is what you are looking for
Use display:table and display:table-cell to achieve your need.
I added one more div that will act as a table
< div class="details">
Below div act as a table cell
< div class="details-left">left< /div>
< div class="details-right">right< /div>
<div class="details">
<div class="details-left">left</div>
<div class="details-right">right</div>
</div>
html
.details { display:table; width:100%; overflow:hidden;}
.details-left {
background: yellow;
display:table-cell;
width: 50%;
}
.details-right {
background: silver;
width: 50%;
display:table-cell;
}
css
demo: http://jsfiddle.net/ravinthranath/skuvnvqL/
fiddle
I've the following markup:
<div id="all">
<div id="one">one</div>
<div id="two">two</div>
<div id="main">main para goes here</div>
</div>
and the following css:
#all{
height: 300px;
background: red;
}
#one{
float: left;
}
#two{
float: right;
}
#main{
margin: 0 auto;
width: 250px;
}
I wanted to align vertically but no success even after using pseudo technique. Vertical alignment should work at least ie8.
Please note: I can't change the markup. It means I can't avoid using float.
So, is there any way to make it success?
Well, using CSS floats gives no chance to align the floated element vertically in their container (regardless of using CSS flexible box method).
Hence I'd go with inline-blocks so that I can align them by vertical-align: middle declaration.
So far so good, but the #two element must be positioned at the right side of the container without using CSS floats. Hence we have to specify width of the columns to reorder the columns via relative positioning:
To get this approach to work on IE8, we have to use percentage units for the width columns. Saying that we'll end up with:
EXAMPLE HERE
#all {
height: 300px;
width: 100%;
font-size: 0; /* To remove the white-space between inline-block columns */
}
#all:before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
}
#one, #two, #main {
display: inline-block;
vertical-align: middle;
position: relative;
font-size: 16px; /* Reset the font-size to the default value */
}
#one, #two { width: 30%; }
#two { left: 40%; text-align: right; } /* Push the column to the right by 40% */
#main{ right: 30%; width: 40%; } /* Pull the column to the left by 30% */
This will work on IE8+ (not remember the requirements of IE6/7). However for IE9+ we can use calc() expression to specify the width of columns like so:
Example Here
#one, #two {
width: calc((100% - 250px) / 2);
}
#two{
left: 250px;
text-align: right;
}
#main{
right: calc((100% - 250px) / 2);
width: 250px;
background-color: orange;
}
Demo
Using flex-box
css
#all{
height: 300px;
background: red;
display: flex;
align-items:center
}
#one{
float: left;
order: 1;
}
#two{
float: right;
order: 3;
}
#main{
margin: 0 auto;
width: 250px;
order: 2;
}
Using a bit of jquery and css you can easily center the elements that you want:
CSS
div{
outline:solid gray 1px;
}
#all{
height: 300px;
}
#one{
float: left;
position:relative;
}
#two{
float: right;
position:relative;
}
#main{
margin: 0 auto;
width: 250px;
position:relative;
}
JS
function center(element){
var all = $("#all");
if(element.height()<all.height()){
element.css(
"top",
((all.height()/2)-(element.height()/2))+"px"
);
}
}
center($("#one"));
center($("#two"));
center($("#main"));
FIDDLE
http://jsfiddle.net/ovkgzmdv/5/
i have three classes
.wrapper
{
width: 100%;
float:left;
min-height: calc(100% - 80px );
background-color: #2d3e50;
}
.menu
{
width:7%;
float: left;
background-color: #2d3e50;
height: 100%;
}
.content
{
float: left;
padding: 20px 5px 20px 1%;
width:93% ;
background-color: #ffffff;
height: 100%;
}
<div class="wrapper">
<div class="menu"></div>
<div class="content"></div>
</div>
the height of the "wrapper" is perfect as per the calculation but i want height of the "menu" and "content" class 100% as per the "wrapper" class in all browser "safari" ,"chrome" also. but not working properly please suggest me css for all browser the problem is putting here as image![enter image description here][1]
Height in percentage would work only in IE not other browsers. For other browsers you should have a fixed height to your parent div.
Here is easy solution to make it work:
html,body{
height: 100%;
}
Add this CSS to .wrapper and .menu:
.wrapper {
position: relative;
}
.menu {
left: 0;
position: absolute;
}
and remove the
float: left;
from .menu. Does that give .menu a height of 100%?
If yes, then remove the
float: left;
from .content and add this to .content's CSS:
.content {
position: relative;
}
so it is my last suggesstion works fine in w3s tryit editor.<table class="wrapper"> <tr>
<td class="menu"></td>
<td class="content"></td>
</tr></table>
You can try it with display: table and display: table-cell.
Here is the demo
CSS
* {margin: 0}
html, body {height: 100%}
.wrapper
{
display: table;
height: calc(100% - 80px );
background-color: #2d3e50;
width: 100%
}
.menu
{
display: table-cell;
width:7%;
background-color: #2d3e50;
height: 100%;
}
.content
{
display: table-cell;
padding: 20px 0.5%;
width:92% ;
background-color: #ffffff;
height: 100%;
}
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.