From this JSFiddle, you can see that I have a footer.
I would like to align the content within each column so that the container is centered, but the text still aligned left.
HTML:
<div class="left">
<div class="align">
<h6>Facebook</h6>
<h6>Twitter</h6>
<h6>Blog</h6>
</div>
</div>
<div class="right">
<div class="align">
<h6>Privacy Policy</h6>
<h6>Terms of Service</h6>
<h6>Help</h6>
<h6>Contact Us</h6>
</div>
</div>
CSS:
div {
width: 50%;
}
.left {
float: left;
}
.right {
float: right;
}
.align {
display: table;
margin: 0 auto;
}
Any suggestions? Thanks.
Please check this
.left {
width: 50%;
float: left;
background-color: white;
}
.right {
width: 50%;
float: right;
background-color: black;
color: white;
}
.hor-center {
display: table;
margin: 0 auto;
}
<div class="left">
<div class="hor-center">
<h6>Facebook</h6>
<h6>Reddit</h6>
<h6>Instagram</h6>
</div>
</div>
<div class="right">
<div class="hor-center">
<h6>Terms</h6>
<h6>F&Q</h6>
<h6>Email</h6>
</div>
</div>
You need to set a width on a block level container and give it margin: 0 auto;. You can change the 0, which controls top and bottom margins, but the key is having a definite width with auto left and right margins.
Related
.row {
width: 100%;
height: 150px;
}
.col {
display: inline-block;
margin: 0 auto;
height: 150px;
}
#left {
float: left;
width: 30%;
height: 150px;
background-color: red;
}
#center {
width: 40%;
height: 100%;
background-color: green;
}
#right {
float: right;
width: 30%;
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
I have read so many posts but still cannot make this work. I am missing something. I want to have these three divs in my header. The center div should be centered in the middle of the page and it will be a image. The other divs will be on the left and right and a combination of text and images as desired. I want all 3 divs to have their content vertically and horizontally centered. How do I do this and maintain some responsiveness for users on div browser and screen sizes. Responsiveness is secondary issue, getting the content aligned is the main challange. Thanks,
You can use display: table for row and display: table-cell for columns
.row {
width: 100%;
height: 150px;
display: table;
}
.col {
width: 30%;
height: 150px;
display: table-cell;
text-align: center;
vertical-align: middle;
}
#left {
background-color: red;
}
#center {
width: 40%;
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
You could use CSS3 flexbox for it:
.row, .col {
display: flex;
justify-content: center;
align-items: center;
}
.col {
height: 200px;
flex: 1 100%;
}
#left {
background-color: red;
}
#center {
background-color: green;
}
#right {
background-color: blue;
}
<header>
<div class="row">
<div class="col" id="left">
Test Test Text
</div>
<div class="col" id="center">
Image
</div>
<div class="col" id="right">
Text Image
</div>
</div>
</header>
JSFiddle
It seems as though when I use float or inline-block on elements, their margin or padding gets doubled. To illustrate this, the margin between the middle and bottom sections is 5%. However, the size of the top section is also 5%, and the top section is half as large as the bottom section.
When I was checking the JSFiddle and re-sizing the window I noticed that the top section does not scale in terms of height relative to the width of the window of the screen, but the vertical margin does.
Any fix or explanation would be appreciated.
html {
overflow-y: scroll;
}
* {
margin: 0px;
padding: 0px;
border: none;
}
div {
outline: black solid 1px;
}
.top {
position: fixed;
width: 100%;
height: 5%;
}
.section {
float: left;
width: 20%;
height: 100%;
}
.left {
float: left;
vertical-align: top;
width: 25%;
margin: 5% 0px;
}
.left1 {
float: right;
width: 80%;
}
.left2 {
float: right;
width: 80%;
}
.right {
float: left;
vertical-align: top;
width: 75%;
margin: 5% 0px;
}
.right1 {
float: left;
vertical-align: top;
width: 66.66666%;
}
.right2 {
float: left;
vertical-align: top;
width: 33.33333%;
}
.right21 {
width: 80%;
}
.right22 {
width: 80%;
}
.bottom {
width: 100%;
}
<div class="top">
<div class="section">top section 1
</div>
<div class="section">top section 2
</div>
<div class="section">top section 3
</div>
<div class="section">top section 4
</div>
<div class="section">top section 5</div>
</div>
<div class="left">
<div class="left1">left 1
</div>
<div class="left2">left 2</div>
</div>
<div class="right">
<div class="right1">right 1
</div>
<div class="right2">
<div class="right21">right 2 1
</div>
<div class="right22">right 2 2</div>
</div>
</div>
<div class="bottom">
bottom
</div>
JSFiddle:
https://jsfiddle.net/9c8uoz0q/
That's because your .top is in fixed position and your .bottom is floating.
Clear the float for your .bottom and remove the fixed position for you .top and you should see that it scale like you meant to.
Fiddle
I am a bit newbie with CSS and i am pretty obfuscated trying to center a group of divs inside a div. What i want:
divs 2,3 and 4 should be centered inside div1.
My approach:
.div1 {
display: inline-block;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
float:center
}
the result is: the 3 divs (2,3 and 4) one on top of another...
Regards,
This can easily be done with table display:
.table-display {
display: table;
width: 100%;
}
.cell-display {
display: table-cell;
}
.div1, .div2, .div3, .div4 {
padding: 40px;
}
.div1 {
background: #ABC;
}
.div2 {
background: #DEF;
}
.div3 {
background: #CAD;
}
.div4 {
background: #FAD;
}
<div class="div1">
<div class="table-display">
<div class="cell-display div2"></div>
<div class="cell-display">
<div class="div3"></div>
<div class="div4"></div>
</div>
</div>
</div>
Maybe set a width on .div1 and remove inline-block from .div1
.div1 {
width: 960px;
margin: 0 auto;
text-align: center;
}
.restofdivs {
width: 470px;
margin: 20px;
min-height: 1px;
}
The most common way to center a block element if you know it's width is to define the width and use "margin: 0 auto". This tells the browser to give a top and bottom margin of 0, and to automatically determine equal margins on the left and right.
Using floats, you can create the layout you described as follows:
http://jsfiddle.net/ynt4suee/
Markup:
<div>
<div id="one" class="border clearfix">one
<div id="wrapper">
<div id="two" class="border">two</div>
<div class="subcontainer">
<div id="three" class="border">three</div>
<div id="four" class="border">four</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
}
div#wrapper{
width: 400px;
margin: 0 auto;
}
div#two{
width: 250px;
float: left;
}
div.subcontainer{
float: right;
width: 130px;
}
.clearfix:after {
content: " "; /* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Here's another approach, using inline-block elements for the inner divs instead:
http://jsfiddle.net/xojqq4v5/
Markup:
<div id="one" class="border">
div 1
<div id="wrapper">
<div id="two" class="border">div 2</div>
<div id="subcontainer">
<div id="three" class="border">div 3</div>
<div id="four" class="border">div 4</div>
</div>
</div>
</div>
CSS:
div.border{
border: 1px solid red;
margin-bottom: 5px;
}
div#wrapper{
width: 450px;
margin: 0 auto;
}
div#two, div#subcontainer{
display: inline-block;
vertical-align: top;
}
div#two{
width: 300px;
}
div#three, div#four{
width: 140px;
}
Still, so long as you know the total width of the inner divs, you can center the wrapper using "margin: 0 auto", which has the advantage of not centering text on all child elements unless otherwise specified.
The difference here is that to lay out the inner divs in columns, div 2 and the container div containing divs 3 and 4 are defined as inline-block elements.
imagine the star * is centred inside the div
textAlignRight * text AlignLeft
That's basically what I am trying to achieve
<center>
<span class="left_host">Right aligned</span>
*
<span class="right_host">Left aligned</span>
</center>
Any help to get this solved would be awesome
thank you
HTML:
<div class="wrap">
<div class="right">text aligned to the right</div>
<div class="star">★</div>
<div class="left">text aligned to the left</div>
</div>
CSS:
body
{
text-align: center;
}
.wrap
{
display: inline-block;
background: #eee;
}
.wrap > div
{
float: left;
padding: 10px 5px;
}
.right
{
text-align: right;
direction: rtl;
}
.left
{
text-align: left;
}
i've added buttons to the live example to let you see what happen when more content will append dynamically: http://jsfiddle.net/wqsb38jr/1/
This is how I would do it structurally:
div {
display: inline-block;
padding: 10px;
vertical-align: middle;
}
.left {
text-align: right;
}
.center {
text-align: center;
width: 110px;
}
.right {
text-align: left;
}
.left,
.right {
width: 200px;
}
.container {
text-align: center;
min-width: 580px;
}
<div class="container">
<div class="left">This text will be aligned right but appear on the left of stuff that you want to put in the center of all this madness.</div>
<div class="center">* This will be centered. *</div>
<div class="right">This text will be aligned left but appear on the right of stuff that you want to put in the center of all this madness.</div>
</div>
http://jsfiddle.net/zn2uafm3/
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!