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/
Related
I've a simple DIV-Container for the main-content of the webpage. I.E
#main { width: 50%; margin: 0 auto; }
Now I would like to fix another container, right and fixed at the top of the #main-Container. See Screenshot:
You can do something like the following using CSS Flex:
.flex-container {
display: flex;
width: calc(66.66% - 20px);
float: right;
}
.main {
flex: 1;
color: white;
text-align: center;
margin-right: 33.33%;
}
.main:first-child {
width: 50%;
margin: 0 auto;
margin-right: 10px;
}
.red {
background-color: red;
height: 200px;
line-height: 200px;
}
.green {
background-color: green;
height: 100px;
line-height: 100px;
max-width: 15%;
}
<div class="flex-container">
<div class="main red">
Main content
</div>
<div class="main green">
?
</div>
</div>
Add the green div inside the centered div and style it.
<div id="main" style="position:relative;">
<div id="green_div" style="position:absolute; left:100%; margin-left:20px; background:green;">
<div>
</div>
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 have 3 elements that I would like to align horizontally, without gaps in between, and centered. I've accomplished lining them up horizontally and equally spaced, but want the touching, ie, to not have white space between them but to also take up 100% width of the page. This is generic html but applies to what I've done on my actual page:
CSS:
.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;
}
.content .featureitem{
height: 100%;
width: 33%;
display: inline-block;
background-color:bisque;
margin: 0;
}
.content:after{
content: "";
width: 100%;
display: inline-block;
}
HTML:
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
I've tried using display:flex, but that leaves a gap on the right hand side. I want to achieve a row of 3 divs, that span 100% of the width with no gaps in between.
You can achieve this by removing the display: inline-block and adding float: left. Also you should consider calculating your width, since 3*33% != 100%:
.content .featureitem{
height: 100%;
width: calc(100%/3);
//display: inline-block;
float: left;
background-color:bisque;
margin: 0;
}
Fiddle
If you'd like to stick with display: inline-block; for layout, there are a number of ways to fight the space between inline block elements. There a number of good solutions in the CSS Tricks article. I typically use the negative margin option (it hasn't come back to bite me in a major way yet):
nav a {
display: inline-block;
margin-right: -4px;
}
or
nav a {
display: inline-block;
margin-right: -2px;
margin-left: -2px;
}
If you're open to another layout, you can use flexbox, or even center a float-based layout with a parent <div>, if that makes sense.
if you use inline-block elements and have indentation in the HTML code, there will be a white space in between each of them.(just like the one you leave in between words)
you may avoid any gap in html or use display : flex or table layout.
You can use HTML comment <!-- comment -->to erase the gap
.content{
width: 100%;
height: 400px;
background-color:white;
text-align: justify;
}
.content .featureitem{
height: 100%;
width: 33.33%;
display: inline-block;
background-color:bisque;
margin: 0;
}
.content:after{
content: "";
width: 100%;
display: inline-block;
}
<div class="content">
<div class="featureitem"></div><!--
--><div class="featureitem"></div><!--
--><div class="featureitem"></div>
</div>
or table/table-cell display
.content {
width: 100%;
height: 400px;
background-color: white;
text-align: justify;
display: table;
}
.content .featureitem {
height: 100%;
width: 33.33%;
display: table-cell;
background-color: bisque;
margin: 0;
}
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
or display:flex and flex:1
.content {
width: 100%;
height: 400px;
background-color: white;
text-align: justify;
display: flex;
}
.content .featureitem {
height: 100%;
flex: 1;
background-color: bisque;
}
.content:after {
content: "";
width: 100%;
display: inline-block;
}
<div class="content">
<div class="featureitem"></div>
<div class="featureitem"></div>
<div class="featureitem"></div>
</div>
I have a div element (1200px width) that contains 3 inner divs.
First and last ones have static sizes (150px and 200px). I want the second one to be centered between logo and buttons. The problem is I don't know how to center this div...
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
width: auto;
float: left;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
One approach would be to set the display of the .text element to inline-block (and remove float: left), then add text-align: center to the parent element in order to center it. Since the other elements are floated, text-align won't affect them, and it will only center the inline .text element.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
text-align: center;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
display: inline-block;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Alternatively, you could also add margin: auto to the .text element and then set display: flex on the parent element. In doing so, the .text element will be centered horizontally with equal space on each side. In doing so, you don't need to float the elements either (since they are flexbox items).
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display: flex;
}
.logo {
width: 150px;
height: 50px;
background-color: darkred;
}
.text {
margin: auto;
}
.buttons {
width: 200px;
height: 70px;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
The problem is that you're floating the centre column. Don't.
The proper way to do what you're doing is to put the left and right columns first, then the centre column won't have to float and you can simply use text-align.
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
text-align:center;
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="buttons"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
</div>
Try
.text {
width: auto;
float: left;
text-align: center;
}
Trivial with Flexbox:
.container {
width: 1200px;
height: 100px;
position: absolute;
margin: 0 auto;
background-color: grey;
display:flex;
justify-content:space-between;
}
.logo {
width: 150px;
height: 50px;
float: left;
background-color: darkred;
}
.text {
background:#c0ffee
}
.buttons {
width: 200px;
height: 70px;
float: right;
background-color: darkgreen;
}
<div class="container">
<div class="logo"></div>
<div class="text">SOME CENTERED TEXT HERE</div>
<div class="buttons"></div>
</div>
Here's an (I think) more appropriate solution which centers the entire div and not only the text, using width:calc(100% - 350px);
https://jsfiddle.net/tyvfcbre/1/
.text {
display:inline-block;
width:calc(100% - 350px);
background:lightgrey;
}
Background is there to demonstrate the div position.
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: