I am having a difficult time with a margin issue. Basically I have 4 boxes displayed inline.
I have the boxes themselves and then an internal container .connect-box-wrap. What I am trying to do is to get the horizontal margin for the .connect-box-wrap to be auto, so the start of the content is around the middle point of the box, making the #contact-connect appear more centered. Right now it looks as if the internal container is aligned left and not taking the margin: 0 auto;.
I am wanting the text to still be aligned left...I just want the internal container to have the horizontal auto margin.
Any ideas?
Fiddle
Here is what it looks like now (paint image showing borders, if it had them).
What I want this to look like is this:
This is a summary of the code, see the fiddle for the full code for all four boxes.
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
#contact-connect-box-container {
margin: 0 auto;
width: auto;
}
.contact-connect-box {
width: 25%;
margin: 60px 0 0 0;
display: inline-block;
/*border: 1px solid black;*/
vertical-align: top;
opacity: 0;
transition:1s; -webkit-transition:1s;
}
.connect-box-wrap {
margin: 0 auto;
}
<div id="contact-connect">
<div id="contact-connect-box-container">
<div class="contact-connect-box">
<div class="connect-box-wrap">
<h2 class="contact-connect-title">A</h2>
<div class="contact-connect-description">555.555.5555</div>
</div>
</div>
</div>
</div>
</div>
</div>
To use margin: 0 auto; when centering elements, there are a few things that are required as outlined in this answer:
https://stackoverflow.com/a/4955135/2106563
The element must display: block
The element must not float
The element must not have a fixed or absolute position
The element must have a width that is not auto
So the only thing missing in your implementation is setting the width. You can set it to a percentage less than 100% and you should notice a change that you're looking for. https://jsfiddle.net/bm4jpwh1/2/
Add a width to the .connect-box-wrap, such as width:80%. Otherwise it will default to 100% width and the margin:0 auto won't do anything.
Margin: 0 auto only works if the element has the width set. Plus the element can't be display: inline or display:block.
An alternative would be to set the element to display: inline-block and set the parent with text-align: center.
add to #contact-connect text align center and give to .contact-connect-box text align left.
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
text-align: center;
}
.contact-connect-box {
width: 20%;
margin: 60px 0 0 0;
display: inline-block;
/*border: 1px solid black;*/
vertical-align: top;
opacity: 1;
transition:1s; -webkit-transition:1s;
text-align: left;
}
Fiddle Example
Related
I'm trying to get the h1 text on the top center of the page, but when I add a border the width of the border extends the entire top part of the page. When I decrease of the width of the element using CSS the border pushes the text towards the left.
Before changing width
After changing the width
Demo :
JSfiddle
Remove float property and add margin: 0 auto to center h1 as it is a block element.
JSFiddle
Try pasting this in the css,
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
The changes made are: removed "float:center;" and added "margin:0 auto;"
Hope this helps.
You can use margin: 0 auto in your css like this
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
Hope this helps
The issue is with the float, there is no float for center, just left and right. Because you have declared a width you can use margin: 0 auto which will center your h1. Keep in mind that if you remove the width the margin: 0 auto will not work.
h1{
text-align: center;
border: 3px solid green;
width: 50%;
margin:0 auto;
}
Should be simple enough. I have a div with a width of 1100px which contains divs of width 300px. I need to space them out equally and clear to the next line below once no more can fit within the 1100px width. Best way to do this? I've never needed to do it.
I think this is what you're looking for. You can use nth-of-type to add margin to the middle boxes
.background{
background: black;
width: 1100px;
margin: auto
overflow: hidden;
}
.box{
width: 300px;
height: 300px;
float: left;
margin: 0 0 20px
}
.box:nth-of-type(3n+2){
margin: 0 100px 20px;
}
FIDDLE
I have a div meant to contain all content on said site, an image I have nested into the div doesn't want to center and I'm not sure why?
here is the CSS.
#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
}
#intro {
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}
intro is the id given to said img, it just floats to the left of the div( id is wrapper) and wont center even though I have right and left margins set to auto?
The problem with margin: auto; is that it will only center block level elements ... and img is by default displayed as inline and follows the text flow (to the left). If you add display: block to it it should work:
DEMO
#intro {
display: block;
padding-bottom: 10px;
width:80%;
margin:10px auto;
border-bottom: 3px solid #b32230;
}
This way you don't need to centrally align the text of the wrapper element.
But if you want to center all inline children of the the wrapper - just use text-align:center on the #wrapper ... however then you may need to have line breaks before and after the images or some text could end up next to them and push them out of the center =)
DEMO
Use text-align: center on main container:
#wrapper {
width: 1000px;
margin: 0 auto;
background-color: #f4f9f1;
text-align: center;/*Add text-align center*/
}
I am currently using flex and I assume it is necessary, but I am open to all CSS solutions.
I have a bar with some elements on the left. This is done with flex: 0 0 auto; on this element group and flex: 1 1 auto; on an empty element after it.
I need to put another set of elements in the center of this bar (not the center of the remaining space). If the first set of elements weren't there, I could do flex: 1 1 auto on the left and right of the centered element with flex: 0 0 auto;.
But now I need to combine these so the left element stays on the left and the middle element stays in the middle, but I also need the left element to push the middle element to the right (therefore making it no longer centered) if they touch.
Edit: I should mention that the widths of both elements are dynamic. I do know heights, but it would be better not to need them.
Something like this?
HTML
<body>
<aside>Left</aside>
<main>Right</main>
</body>
CSS
* {
margin: 0;
padding: 0;
}
main {
width: 1000px;
height: 500px;
background: cyan;
margin: 0 auto;
}
aside {
float: left;
width: 200px;
height: 500px;
background: magenta;
}
Here's a solution that uses absolute positioning and requires the left block's width to be explicitly set. Essentially, absolute positioning takes the block out of the flow and to make sure that the left and right blocks do not overlap, the left margin is set on the right block that is the size of the left block's width.
Here's a fiddle: http://jsfiddle.net/4RqEr/. (Resize the preview window to see the effect).
HTML:
<div class = "container">
<div>left</div>
<div>Pushed to Right</div>
</div>
CSS:
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 10px;
}
.container {
background-color: #ccc;
position: relative;
text-align: center;
overflow: hidden;
}
.container > div:first-child,
.container > div:nth-child(2) {
padding: 10px 20px;
background-color: #fA5858;
color: #fff;
text-transform: uppercase;
font: 15px/1 Sans-Serif;
}
.container > div:first-child {
position: absolute;
left: 0;
width: 100px;
}
.container > div:nth-child(2) {
display: inline-block;
background-color: #5882FA;
margin: 0 100px;
white-space: nowrap;
}
I'm making a site and trying to center the image head. However, it doesn't appear to be working.
Here is the HTML:
<body>
<div id="templatemo_header">
<div class="image"><img src="images/server_banner_lax_en5.png" alt="Header"></div>
</div>
</body>
And the CSS:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 762px;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}
#templatemo_header .image {
width: 762px;
margin: 0 auto;
}
I tried to add margin: 0 auto; to the image, but it still is not centered. How can I do this?
Modify the css for the div containing your image with:
margin: 0 auto;
width: 100%;
Add the following to your CSS file:
.image { width:762px; margin:0 auto;}
Your wrapping div is the same width as the image, this stops any margins from being automatically applied since there is no space.
There are a few ways to fix this, but easiest would be to set the width of templatemo_header (the wrapper div) to 100%. This way the image margins can expand, thereby centering the image.
So in your css, modify the width from 762px to 100%, like so:
#templatemo_header {
height: 263px;
border-top: 5px solid #FFF;
overflow: visible;
width: 100%;
float: left;
background: url(images/templatemo_headerimg_bg.jpg);
}