I'm trying to center two divs that are using "display: inline-block;" but whenever I try to, it's not working. If I remove the inline-block class. It gets centered but displayed down the page instead of across. Example of code:
#news {
background-image: url('../img/news.png');
background-repeat: no-repeat;
height: 152px;
width: 320px;
display: inline-block;
}
#conBody {
background-image: url('../img/conBody.png');
background-repeat: no-repeat;
height: 260px;
width: 321px;
margin: 0px auto 0px auto;
text-align: right;
display: inline-block;
padding: 0px;
}
HTML :
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="conBody">
</div>
<div id="news">
</div>
<div id="news">
</div>
<div id="news">
</div>
Looks like this:
You could contain everything within a wrapper. If you set the wrapper to display: table; then you can canter it even if you do not have a set width.
DEMO http://jsfiddle.net/kevinPHPkevin/nXj7c/
You need to use text-align property.
<div class="news-parent">
<div class="news">
a
</div>
<div class="news">
b
</div>
<div class="news">
c
</div>
</div>
.news-parent{
background: #ccc;
text-align: center;
}
.news {
width: 20%;
display: inline-block;
background: #666;
text-align: left;
}
Live example here: http://jsfiddle.net/7KFNR/
Advice: do not use IDs (#news) - ID is a unique identifier. Simply said: one ID can be found only once on single page. Use classes for rules that apply for multiple elements.
Remember: you need to specify width for div.news elements
You should wrap everything in a div and display it in the centre rather than trying to display each div in the centre individually.
You can centre a block element using CSS:
margin:0 auto;
Here is a fiddle with a barebones demo: http://jsfiddle.net/nRAyQ/3/
Related
I need to center images inside of multiple divs. Everything I try breaks.
These are four boxes, alternating red & blue - horizontal. Looking to have them centered in the page and pushed to the top under another div block. Within each block is an image, which is centered to the same % margin on all sides to the relative red or blue box. You can see below I tried both placing the image directly in a redbox/bluebox div or even going one layer deeper with a box just for the image.
4 Box Example - HTML:
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="images/2.png">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="images/3.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="images/4.png">
</div>
</div>
CSS:
box-container {
height: 900px;
width: 950px;
padding: 12px;
display: inline-block;
vertical-align: top;
margin-left: auto;
}
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
}
.thumbnail img {
display: block;
margin: auto;
height: 130px;
width: 150px;
}
<!-- begin snippet: js hide: false console: true babel: false -->
<div id="box-container">
<!-- Trying natively within a box -->
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<!-- Trying one-layer deeper with its own div -->
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="bluebox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
<div class="redbox">
<div class="thumbnail">
<img src="http://placehold.it/400x400.jpg">
</div>
</div>
You need to add padding to the image based on the height of your thumbnail div.
.thumbnail img {
display: block;
height: 130px;
width: 150px;
padding: 10px;
}
.bluebox img, .redbox .thumbnail img, .bluebox .thumbnail img {
display: block;
margin: 0 auto;
}
or
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
text-align: center;
}
using flexbox
.bluebox, .redbox .thumbnail, .bluebox .thumbnail {
display: flex;
align-items: center;
justify-content: center;
}
I believe I have what you are looking for in this here JSFiddle I just wipped up: https://jsfiddle.net/9yLspwr6/5/
A few key points before the code...
In order to have all the div elements 'float' left you ahve to apply div.className{float:left;} This will ensure divs float left to right and wrap around if they run out of space (much like a paragraph of text). More on CSS float property here: https://www.w3schools.com/css/css_float.asp
Vertical margin does not support 'margin:auto;' like it does for horizontal. Margin can be defined by div.ClassName{margin: 0px 0px 0px 0px;} OR div.className{margin:0px auto;}. The first element this way is for top/bottom margin. The second is for left/right margin. I had to use a little math to vertically center your images, but it gets you what you need. Here is some good documentation on margin: https://www.w3schools.com/cssref/pr_margin.asp
Cleaned up the HTML and removed some CSS no longer needed. I did this to simplify the code while maintaining the solution. If you drop this code into a site you'll want to ensure you only target only the appropriate tags. For example - my code is targeting ALL img tags. You would want to put a class or ID on the IMG tags you want and then ensure that is reflected in the CSS.
I modified the HTML quite a bit. Removed much of the unnecessary elements that were in place for troubleshooting.
<div class="bluebox">
<img src="images/1.jpg">
</div>
<div class="redbox">
<img src="images/2.png">
</div>
<div class="bluebox">
<img src="images/3.jpg">
</div>
<div class="redbox">
<img src="images/4.png">
</div>
Modified CSS below:
.bluebox {
height: 150px;
width: 170px;
background-color: cornflowerblue;
display: inline-block;
border: 3px solid black;
float:left; // new. essentially left justifies the divs.
}
.redbox {
height: 150px;
width: 170px;
background-color: lightcoral;
display: inline-block;
border: 3px solid black;
float:left; // new
}
img { // simplified the target. wrap entire contents of the HTML with a different DIV id to target only images within that div
display: block;
margin: 10px auto; // added 10px. it will then apply 10px margin to top and bottom, auto on left/right
height: 130px;
width: 150px;
}
That should do it. Hope it helps!
I have a responsive website with max-width set to 1000px, but I need to fit background picture that will overlap one of the divs and also place full page-width bottom borders to other divs.
The code i have is like this:
.container {
width: 100%;
max-width: 1000px;
}
.logotest {
background-color: #03b9e5;
height: 50px;
}
.navtest {
background-color: #e4ed00;
height: 25px;
}
.socialtest {
background-color: #ab801a;
height: 25px;
}
.main {
height: 750px;
background: url(background.jpg) no-repeat top center;
margin: auto;
}
.line {
border-bottom: 1px solid black;
}
.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">
</div>
</div>
<div class="line"></div>
<div class="main line" id="second">
</div><div class="container">
<div id="third">
</div>
</div>
</body>
I get the first div with correct width and bottom border going across the full page width, second div has got the background picture showing, but the max-width of 1000px does no longer apply. The bottom border is shown correctly (dividing second and third div) and the third div has got the correct max-width applied again.
What am I doing wrong/not doing to get the max-width for the second div?
YOUR SOLUTION
If the browser support of background-size property is good enough for you, you can use background-size: cover;. Check here or here to see browser support.
Here is the code snippet to show how it works. Be sure to position your background-image to center center if you want it to always be centered.
.container {
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.line {
border-bottom: 1px solid black;
}
.logotest {
background-color: #03b9e5;
height: 50px;
}
.navtest {
background-color: #e4ed00;
height: 25px;
}
.socialtest {
background-color: #ab801a;
height: 25px;
}
.main {
height: 250px;
background: url(http://lorempixel.com/250/250) no-repeat center center;
background-size: cover; /* This does the magic */
}
.container:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
<body>
<div class="container" id="first">
<div class="logotest">
</div>
<div class="socialtest">
</div>
<div class="navtest">
</div>
</div>
<div class="line"></div>
<div class="main" id="second">
<div class="container">Put your content in here.</div>
</div>
<div class="line"></div>
<div class="container">
<div id="third">
</div>
</div>
<div class="line"></div>
</body>
LAST (BUT NOT LEAST)
You might want to check this great article about the state of responsive images in web design, that will help you if you are going into responsive web design: Responsive images done right.
I have two divs: floated left and floated right. The margin on the right div is breaking the left div, making it appear lower on the page than it should be. I want both divs to touching the top.
HTML:
<div class="right_div">
This div is in the right place.
</div>
<div class="clear"> </div>
<div class="left_div">
This div should be at the top</div>
CSS:
.right_div {
float: right;
margin-right:20px;
margin-top: 20px;
font-weight: 600;
background-color:blue;
}
.left_div{
margin-left: 20px;
margin: 0 0 0 20px;
padding: 0;
background-color: tomato;
text-align: left;
max-width: 10em;
}
.clear {
clear:both;
}
Here is the JSFIDDLE: http://jsfiddle.net/eLSc8/
remove
<div class="clear"> </div>
try this
<div class="right_div">
This div is in the right place.
</div>
<div class="left_div">
remove the
<div class="clear"> </div>
and the red element will stay on top.
As a sidenote, empty markup placed for styling purpose only should be avoided. If you need to apply a float clearing somewhere you should use non-structural approach like easyclearing and modern variants (e.g. see the .clearfix class of html5 boilerplate)
try this
http://jsfiddle.net/eLSc8/1/
please remove this clearboth
<div class="clear"> </div>
As everyone is saying; you can lose the clearing div.
Then simply add a float left to your other div to align it.
Depending on your structure and how you want it positioned, you might need to contain them or add margin. check jsfiddle.net/RSy6F/2/
Is this the desired effect:
http://jsfiddle.net/eLSc8/4/ ?
HTML:
<div class="left_div">This div should be at the top</div>
<div class="right_div">This div is in the right place.</div>
CSS:
.right_div {
font-weight: 600;
background-color:blue;
position: absolute;
top: 20px;
right: 20px;
height: 2.2em;
}
.left_div {
position:absolute;
top: 20px;
left: 20px;
background-color: tomato;
height: 2.2em;
}
I am building a bunch of list items in an un-ordered list. The list has a fixed size of 250px X 75px;These list items are generated dynamically so i do not know what text will be displayed, so my li looks like this.
#pages-content li{
float: left;
width: 250px;
height: 75px;
margin: 15px;
vertical-align: middle;
text-align: center;
}
I found one suggestion that said to make the line height 75px and that worked until there is more than one line.
CSS:
#pages-content ul li{
width: 250px;
height: 75px;
text-align: center;
}
HTML:
<div id="pages-content">
<ul>
<li>Matter here</li>
</ul>
</div>
Working fiddle
Do you have to use lists? Can you use divs instead?
<style>
.div {
width: 250px;
height: 75px;
position: relative;
}
.container {
position: absolute;
width: 250px;
height: 75px;
display: table;
}
.container p {
display: table-cell;
vertical-align: middle;
text-align: center;
}
</style>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
<div class="div">
<div class="container">
<p>This text should look centered even if it's long.</p>
</div>
</div>
For a purely HTML/CSS solution, try using a table and vertical-align: middle in the table cell.
http://jsfiddle.net/3zLcT/
If you can only use css, I'm afraid you're out of luck.
adding display: table-cell might work, as vertical-align is meant, more or less, for table data
I have a container div and would like to place three div tags within the center div, I have the XHTML correct, but what I am having trouble in is, well, centering the three divs within the div.
I will now show the code.
XHTML 1.0 Transitional (HTML)
<div id="container">
<div id="header">
</div>
<div id="content">
<div id="contentbox">
</div>
<div id="contentbox">
</div>
<div id="contentbox">
</div>
</div>
</div>
Cascading Style Sheet (CSS)
#container {
width: 900px;
height: inherit;
margin: 30px auto;
}
#content {
float: center;
width: inherit;
height: inherit;
margin-left: auto;
margin-right: auto;
position: absolute;
}
#header {
margin: 0 auto;
background-image: url(images/logo.png);
background-position: center;
width: 250px;
height: 250px;
}
#contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
background-image: url(images/contentbox.png);
}
To see an example of what I am trying to do, please visit http://www.noxinnovations.com/portfolio/hfc/
I want to know how to center those three content boxes within the content div.
Thank you very much,
Aaron Brewer
Check if this is what you want :
http://jsfiddle.net/65WHf/1/
Note that ID's are supposed to be unique, and there's no such thing as center floating. To center a div, you must ensure it's positioned relativelly to it's container (wich is the default behaviour of most browsers of my knowledge) and make use of the followinf syntax :
.something {
margin: 0 auto;
clear: both; // instead of float
}
Hey,
float: center; won't work. There's no such value for the float property.
use this instead for the #content css
text-align: center;
hope that helps.
You could always do something like this:
HTML:
<div id="container">
<div id="header"></div>
<div id="content">
<div class="contentbox"></div>
<div class="contentbox"></div>
<div class="contentbox"></div>
</div>
</div>
CSS:
.contentbox {
margin-left: auto;
margin-right: auto;
float: left;
display: block;
width: 250px;
height: 250px;
border: 1px dashed #999; /* just for visuals */
margin: 0 10px; /* just for visuals */
}
You definitely want to stay away from IDs as a general practice, do you can use them with javascript (jquery, etc) libraries. Plus it's cleaner that way.