I'm trying to display two <div> elements on the same line, but in the center. To center them, I had to set margin:auto; However, in order to get two on the same line, I had to do any one of the following:
Set display:inline; (which cancels out the centering)
Set float:left; to both (which cancels out the centering)
Set display:table-cell; (which cancels out the centering)
What can I do to get both divs to be in the center? Or should I use something else to do this? I've tried <span> but the inline property does the same as stated above for setting display:inline;.
EDIT: Here is the CSS for the <div> elements I'm trying to apply this to:
.homediv {
background-color:#F7F7F7;
border:1px solid #FFFFFF;
-webkit-border-radius:4px;
-moz-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
/* width must be defined in the actual element because it can have various sizes */
-webkit-box-shadow: 0px 0px 8px #888888;
-moz-box-shadow: 0px 0px 8px #888888;
box-shadow: 0px 0px 8px #888888;
margin:auto;
text-align:center;
padding:4px;
}
In the HTML file, I only add a width for each element, and now I'm trying to add different display properties that will fix the issue.
The "wrapper" idea suggested below seems to be the only solution, but with this CSS maybe there's something I'm doing wrong?
SECOND EDIT: As one final addition, what would be the best way to put space between these two <div> elements, as they have box shadows and I don't want them to be squished together.
You can do this, but you'll need an explicit width on your outter div.
Try this example:
.outer {
width: 200px;
margin: 0 auto;
}
.inner1 {
float: left;
background-color:
red; padding: 20px;
}
.inner2 {
float: left;
background-color: aqua;
padding: 20px;
}
<div class="outer">
<div class="inner1">Hi</div>
<div class="inner2">Stackoverflow</div>
</div>
Hope this helps!
Wrap the two elements in another element. Set display:inline-block; for the inner elements and margin:0 auto; for the outer one.
Have you tried display: inline-block;? An example of the HTML you are working with would help... put one up at http://jsFiddle.net if inline-block doesn't solve your problem.
Related
I cannot push the side div and container div in my html code to the background or atleast inline with the other divs. As I have set a border on the divs in my css, it causes <div id="side"> to show above every other div, the same is also happening to <div id="container"? This causes these divs to float over the rest of the divs:
You can see the issue here:
body {
min-height:100%;
}
div {
margin-bottom: 5px;
margin-top: 5px;
margin-left: 5px;
margin-right: 5px;
background-color: #F6F4F4;
box-sizing: border-box;
box-shadow: 0 -1px 2px rgba(0,0,0, .7);
transform-style: inherit;
}
Put z-index:-1 in #side and #container . For example http://jsfiddle.net/d3u1fqfa/3/
try adding a z-index option to the container in css.
the z-index defines when two or more tags overlap which one of them should be on top the default is z-index:0; so if you try z:-index:-1; it might solve the problem you are having
I know this question has been asked a million times and I've already used all those solutions in other websites I created and they worked just fine.
However, in my latest situation, the usual answers are not working for me.
This is the class that needs to have other elements centered inside it (ie. lists, tables):
.container {
position: relative;
width: 80%;
height: 90%;
background-color: #282828;
box-shadow: inset -6px -6px 6px -2px #1d1d1d;
color: #FFF;
border-radius: 0 10px 0 0;
float: left;
}
I added the position: relative because I put another child <div> inside .container which had its position set to absolute. I actually managed to center things, but that's not the kind of center I need. When I added a table-like div structure inside .container it went straight back to the left - no idea why.
I would appreciate some help.
JSFiddle: http://jsfiddle.net/J3jm7/3/
Centering an inline element
To center an inline element just use text-align:center on the container.
.container {
text-align:center
}
Demo
Centering a block-level element
Use margin:auto to center a block-level element such as a table within its container.
.container table {
margin:auto;
}
Demo
Centering a list
Lists are a bit of a special case because of li { display: list-item; }. To center a <ul> you will need to change it to an inline-block element and center it on the container.
.container {
text-align:center
}
.container ul {
padding:0;
display:inline-block;
}
Demo
You have to set the left and right margins of the element inside of your container. Here's an example, slightly modifying your code so you can see the centering happening on the table element:
<head>
<style>
.container {
position: relative;
width: 100%;
height: 800px;
background-color: #282828;
box-shadow: inset -6px -6px 6px -2px #1d1d1d;
color: #FFF;
border-radius: 0 10px 0 0;
float: left;
border:1px solid black;
}
.container table {
width:25%;
height: 25%;
margin-left:auto;
margin-right:auto;
border:5px solid blue;
}
</style>
</head>
<body>
<div class="container">
<table></table>
</div>
</body>
</html>
I'm currently learning HTML. I'm trying to add 3 images inside a div, the images need to have the same amount of space between them. How to do this?
Example: https://docs.google.com/drawings/d/1WZdL0WVz-VndX2qP0Ig0S8fZnCGW2k37RHvWXLdgWz0/edit?usp=sharing
The code I currently have:
<style type="text/css">
.maindiv{
position: relative;
width:90%;
height:50%;
border-style:solid;
border-color:Red;
border-width:2px;
}
.imgbott{
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
</style>
<body>
<div class="maindiv">
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
<div class="imgbott">
<img src="https://sites.google.com/a/itcld.com.br/portal-de-treinadores/_/rsrc/1377018552616/imagens/images.jpg" alt="">
<a>TESTE</a>
</div>
</div>
</body>
Code runing: https://script.google.com/a/macros/itcld.com.br/s/AKfycbyjeAIFhKnAXzvXd8lS3S-ND4H0n63i-FBxr-i9Z1omeFmBYtA/exec
Thank you.
Change your css to:
.imgbott{
margin: 0px 10px;
height:auto;
width:auto;
max-width:200px;
max-height:200px;
float:left;
text-align: center;
}
The margin: 0px 10px means 0px margin to the top and bottom, and 10px margin to the left and right. Maybe one would expect 20px margin between the divs then, but there is a effect called "margin collapsing" which prevents that.
is this what you looking for
http://jsfiddle.net/Gfnjz/
.box {
display:table;
table-layout:fixed;
min-width:900px; /* some minimum width is a good idea. */
border-spacing:20px 0; /* note that spacing is also applied to right and left ends */
background-color:#666;
margin:0 auto;
}
.box div {
display:table-cell;
width:33%;
vertical-align:middle;
border:1px solid #bbb;
background-color:#eee;
padding:30px;
}
You can do something like this:
.divName{
width:300px;
display: inline-block;
margin: 0 20px 0 0;
float: left;
}
Then for the last box, apply a .lastBox class as well to force no margin, that way they are perfectly centered, assuming your parent container is centered that is:
.lastBox{
margin-right: 0;
}
The HTML:
<div class="divName">
<p>stuff</p>
</div>
<div class="divName">
<p>stuff</p>
</div>
<div class="divName lastBox">
<p>stuff</p>
</div>
if you only want the same space between the "imgbott" divs, set their margin instead of width attribute.
Your class will looks like
.imgbott{
margin: 0px 10px;
float: left;
text-align: center;
}
.imgbott a
{
display:block;
}
Then doesn't matter what is the width of the images inside, the space will always be 20px between the images.
In additional you can remove the margin-left of the first image using the first-child selector
.imgbott:first-child {
margin-left:0px;
}
You can achieve this result by using inline-blocks and text-align: justify, with adding some fake content before and after the divs to be aligned via pseudo-elements:
.maindiv{
width:90%;
border: 2px solid red;
text-align: justify; /* turns on justification 'magic' */
line-height: 0; /* removes extra space below divs because of extra line */
}
.maindiv:before {
font-size: .1px;
content: 'i'; /* adds nearly invisible fake content in the beginning of the line */
}
.maindiv:after {
font-size: .1px;
content: 'i i'; /* adds nearly invisible fake content in the of the line */
word-spacing: 99in; /* huge word-spacing assures that the 2nd 'i' wraps to the next line making 'justify' work */
background: #ccc;
}
.imgbott{
display: inline-block;
line-height: 1; /* restore the normal line height inside divs */
}
JSFiddle
Optionally, you can prohibit the wrapping of the divs if the container is narrower than the sum of their widths by adding white-space: nowrap to the container and normal to its :after: see edited JSFiddle
This solution may look a bit tricky, but it works for arbitrary number of blocks of arbitrary (possibly different) widths.
How to center several boxes in CSS? Suppose I have a div "navigation". Now, the navigation margin is auto, that is, it is in the center, how would I add lists(display:inline) inside navigation that will expand navigation on both sides. I haven't set the width property so the width will be dynamically expanding. Its like float :center.
Set margin:auto and width:940px and you are done. You can change width as per your need. But giving some width is compulsory.
Check this fiddle and tell me if it helped you.
http://jsfiddle.net/JNMZ3/4/
You can change padding of the li elements for more space. And then adjust width of the navigation div to keep it in center.
try this
your css replace with
http://jsfiddle.net/JNMZ3/3/
.navigation li{
margin: 3px 6px 3px 6px;
display: inline;
border: 2px solid black;
padding: 2px;
zoom:1;
width:auto;
}
Here's a working one.
Use margin: 0 auto; will get your element centered most of the time. (Quick note: your element must have a declared width for this to work.)
The margin: 0 auto; rule is shorthand for 0 top and bottom margin, and automatic left and right margins. Automatic left and right margins work together to push the element into the center of its container.
The margin: 0 auto; setting doesn't work perfectly in every centering situation, but it works in a whole lot of them.
reference: You Can't Float Center with CSS
HTML
<div class="leftsidebar">a</div>
<div class="rightsidebar">b</div>
<div class="content">c</div>
CSS
.leftsidebar
{
height: 608px;
width: 100px;
background:red;
float:left;
}
.rightsidebar {
background:blue;
height: 608px;
width: 100px;
float:right;
}
.content {
width: auto;
margin:0 auto;
background:yellow;
height:608px;
}
I know there is like 100 of topics made and I've tried all 100's of them and I just can't get it to work, Aligning the image in the middle, if you check in to
http://one1.no-ip.org/index.php?hitta=tanto&page=search
you'll see that the logo is at the top of the screen and whatever I do I just can't make it align correctly. I'm sure something is interfering but I just can't find out what, I even made a fiddle to check if the method im using is working and it is
http://jsfiddle.net/UJATF/
Working example with the image in the middle of the div element
CSS
.logo{
background:white;
position:absolute;
width:105px;
height:90px;
line-height:90px;
left:180px;
margin-top:20px;
line-height:90px;
text-align:center;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
box-shadow:inset 0px 0px 0px 1px white,inset 0px 0px 10px -4px black;
z-index:1000;
overflow:hidden;
}
.logo img{
vertical-align:middle;
max-width:90px;
max-height:40px;
}
HTML
<div class="logo">
<img src="http://www.tantobil.se/images/logo.png">
</div>
so all help would be very much appreciated
Define your anchor link display : inline-block and give to margin-top
as like this
.logo > a {
display: inline-block;
margin-top: 22px;
}
Results is
--------
Is your are using dynamic with of img than used to this
Second option is
.logo > a {
display: table-cell;
height: 90px;
text-align: center;
vertical-align: middle;
width: 105px;
}
Since you're using fixed heights in your css, why don't you just use simple math to determine the top position of the logo?
.content is 121px high,
.logo is 90px high
The difference is 31px, which means you need a top offset of 15.5px
Also, set the .content to position: relative so you position the logo relatively to .content's top.