I am running into an issue of trying to center children div while keeping the content aligned left. I have four boxes that are inline, the boxes are set to 25% width and are naturally aligned left. My issue is the four boxes does not look like they are centered on the page because of the natural alignment within the boxes. You can see this in the first image.
So what I thought to do was inside of my .contact-connect-box was to make a child div( connect-box-wrap ), somewhat as a wrap for inside of the box and add margin: 0 auto; , however this is not helping at all.
If you look at the second image, that is what I am after. I want the content to still be aligned left, but the margin for everything to be shifted over so that the box positioning appears centered on the page.
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
}
#contact-connect-box-container {
margin: 0 auto;
width: auto;
/*display: flex;
justify-content: space-around;*/
}
.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">Call</h2>
<div class="contact-connect-description">gfdgg</div>
</div>
</div><div class="contact-connect-box">
<div class="contact-connect-box">
<h2 class="contact-connect-title">Write</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">Fill out our contact form.</div>
</div>
</div>
</div><div class="contact-connect-box">
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
gsdfg
</div>
</div>
</div><div class="contact-connect-box">
<div class="contact-connect-box">
<h2 class="contact-connect-title">Connect</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">Visit us on Facebook</div>
<div class="contact-connect-link">See us on Youtube</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
</div>
</div>
I would scrap the .content-connect-box-container because you already have the .content-connect-box so that seems redundant. I did this by centre text aligning .content-connect-box and then left text aligning .connect-box-wrap. Also be careful about how you choose to make your spacing. If you're working in % make sure to stick with that, if you mix % with px, certain screen sizes will break your layout. Feel free to play around with different margin %s in my code to see how I spaced everything.
<div id="contact-connect">
<div class="contact-connect-box">
<div class="connect-box-wrap">
<h2 class="contact-connect-title">Call</h2>
<div class="contact-connect-description">gfdgg hgakhglkrjhg kjshfglkjshd flkjgshfd oweir werowheor weriwjeroija
</div>
</div>
</div>
<div class="contact-connect-box">
<div class="connect-box-wrap">
<h2 class="contact-connect-title">Call</h2>
<div class="contact-connect-description">gfdgg
</div>
</div>
</div>
<div class="contact-connect-box">
<div class="connect-box-wrap">
<h2 class="contact-connect-title">Call</h2>
<div class="contact-connect-description">gfdgg
</div>
</div>
</div>
<div class="contact-connect-box">
<div class="connect-box-wrap">
<h2 class="contact-connect-title">Call</h2>
<div class="contact-connect-description">gfdggaksj
</div>
</div>
</div>
</div>
<style type="text/css">
#contact-connect {
width: 80%;
height: auto;
margin: 0 10%;
padding: 80px 0;
display: block;
}
.contact-connect-box {
width: 21%;
margin: 0 0 0 1%;
display: inline-block;
border: 2px solid black;
vertical-align: top;
text-align: center;
}
.connect-box-wrap {
margin: 10% auto;
width: 50%;
text-align: left;
}
</style>
Related
I am trying to put a text under every image of an album. so I've added 6 photos side by side with float left. I know that the img tag is an inline-block of default so I put a div with class text with text inside and in the CSS I assigned it "display: block" in this way I thought I would make it appear under the image .. why this does not happen? I tried also to assign to the div text... position absolute and to the container position relative but this only works for the first image ...
.conteiner {
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
.box {
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: calc(100% / 6 - 20px);
height: 15vh;
float: left;
margin: 10px;
background-position: center;
}
.clearfix {
content: '';
display: table;
clear: both;
.text {
display: block;
}
<div class="conteiner clearfix">
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
</div>
enter image description here that's what I have
enter image description here and that's what I want to do
It would be much simpler to use Grid or Flexbox to get such a layout. No need for float and clear.
Using Grid:
.container {
display: grid;
grid-template-columns: repeat(6, 1fr);
width: 100%;
height: 50vh;
margin-top: 50px;
padding: 20px;
}
Then simply place the 6 images first to fill up the first row and the 6 texts second to fill up a second row.
<div class="container">
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
<div class="text">
Recenti
</div>
</div>
Also, the content of the grid will be sized to fill the grid area so you may not have to explicitly size the box.
.box{
background-image: url('xxx.jpg');
background-size: cover;
border: 1px solid black;
width: 100%;
height: 15vh;
background-position: center;
}
Try this :
https://codepen.io/the-wrong-guy/pen/xxZzBwR
.box {
display: grid;
}
I have a section that I want to look as if it is centered on the page. I have four boxes that appear inline and I believe the reason they do not like they are centered is because everything is aligned naturally to the left. The thing is, I do not want the content that is in these boxes to be centered, I want them aligned left.
So how can I make the boxes appear as if they are centered within the page, but not have it affect my text?
#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;
transition:1s; -webkit-transition:1s;
}
<div id="contact-connect">
<div id="contact-connect-box-container">
<div class="contact-connect-box">
<h2 class="contact-connect-title">Call</h2>
<div class="contact-connect-description">vcxv</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Write</h2>
<div class="contact-connect-description">
Reach out to us
<br>
<div id="scroll" class="contact-connect-link">Fill out our contact form.</div>
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Visit</h2>
<div class="contact-connect-description">
fgrge
</div>
</div>
<div class="contact-connect-box">
<h2 class="contact-connect-title">Connect</h2>
<div class="contact-connect-description">
<div class="contact-connect-link">Visit us on Facebook</div>
<div class="contact-connect-link">See us on Youtube</div>
<div class="contact-connect-link"></div>
</div>
</div>
</div>
</div>
You can just add "display: flex" on your #contact-connect-box-container
#contact-connect-box-container {
margin: 0 auto;
width: auto;
display: flex;
}
DEMO :
https://jsfiddle.net/w776Lq1u/8/
The problem is the margin on the right side of "Connect." I would recommend using flexbox and using display: flex; justify-content: space-around; That way you won't need any margins at all.
EDIT: plnkr
I am using bootstrap and I have two container inside a bootstrap container. Like this:
<div class="container">
<div id="container-map">
aasdasd
</div>
<div id="container-buttons">
asdasda
</div>
</div>
What I am trying to do is center the two divs, #container-map and #container-buttons side by side, inside the main container.
This is my custom CSS for the two divs:
#container-map,
#container-buttons {
display: inline-block;
margin: 0 auto 0 auto;
width: 500px;
height: 500px;
}
Is there a reason you don't want to use the bootstraps built in gridsystem? Something like this?
<div class="container">
<div class="row">
<div class="col-md-3 col-md-offset-3">
<div class="container-map">
asdf
</div>
</div>
<div class="col-md-3">
<div class="container-buttons">
asdf
</div>
</div>
</div>
</div>
Just change your CSS to this
#container-map,
#container-buttons {
float: left;
margin-left: auto;
}
Both containers will be centered and side by side
You can try the code from this example (using text-align: center; on .container display:inline-block; for divs).
<style>
.container {
position:relative;
text-align:center;
}
#dv1, #dv2 {
display:inline-block;
width:100px;
margin:0 3px;
background:#33f;
}
</style>
<div class="container">
<div id="dv1">Div 1</div>
<div id="dv2">Div 2</div>
</div>
you make both your divs to take equal height using flex. You can refer the link to find out the browsers which support it. Have a look at this:
.container {
display: flex;
width: 400px;
background: #eee;
}
.column {
flex: 1;
background: #fff;
border: 1px solid #ccc;
margin: 1px;
}
<div class="container">
<div class="column">
<p>aasdasd</p>
</div>
<div class="column">
<p>asdasda</p>
<p>asdasda</p>
</div>
</div>
I have 3 divs with content in them, and the 2 with less content are flush with the bottom of the larger div.
There's no margin or padding, so I'm not sure why is this happening?
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
It is because of the vertical-align property on the .box class is set to bottom. Setting elements to be inline-block will allow the vertical align property to affect their positioning.
Just a note: you didn't set the vertical align property yourself, but it is inheriting it from another rule. Try setting it directly to see the different results.
.box {
vertical-align: top;
/* ... */
}
Since they are inline-level elements, their vertical alignment is given by the vertical-align property.
.box {
vertical-align: /* value */;
}
Some examples:
vertical-align: top
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: top;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
vertical-align: middle
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: middle;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
vertical-align: bottom
body {
width: 100%
}
.container {
margin: 0 auto;
text-align: center;
}
.box {
display: inline-block;
width: 25%;
height: 100%;
border: 3px solid black;
padding: 2%;
vertical-align: bottom;
}
<div class="container">
<div class="box blue">
<h1>Box 1</h1>
<p>Blub</p>
<div class="remainder"></div>
</div>
<div class="box green">
<h1>Box 2</h1>
<p>I'm working on different ideas for 100% height without using Flexbox, Tables, or a set height on the parent container.</p>
<hr />
<p>That's not my question though, why are boxes 1 & 2 floating so far down?</p>
</div>
<div class="box yellow">
<h1>Box 3</h1>
<p>Here's some more content</p>
<div class="remainder"></div>
</div>
</div>
I am trying to center some so that they are displayed within the center, however the tricky part is the html is within a number of (part of the html is static, and part of it is dynamic from a database).
See the screenshot as an example of how it currently looks (I want this content in the centre)
http://postimg.org/image/5fc6ecgy7/
note - the site is using the base 960 grid system
Below is the HTML:
<div class="">
<div class="">
<div class="">
<div id="national-prize-feed" class="panel-wrapper ">
<div class="border">
<div class="content clearfix add-radius">
<div style="padding:10px 0px;">
<div id="nation-prizes-collection" class="clearfix">
<div class="summary"></div>
<div class="">
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="iPod Shuffle" src="/images/prizes/ipod-shuffle.png">
</div>
</div>
<div class="national-prizes">
<div class="prizes">
<img class="prizes-img" alt="Football" src="/images/prizes/football.png">
</div>
</div>
</div>
<div class="keys" title="/pages/index/slug/prizes" style="display:none">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
My specific css (there is a lot more.. it is based on a grid based layout)
div.prizes {
float: left;
}
div.prizes img {
width: 280px;
}
.prizes-img {
padding: 0 7px 0 7px;
margin: 7px 5px 7px 5px;
max-width: 100%;
height: auto;
}
In order to position a DIV to the center of a screen, you need to set a static width of the div to be centered, left: 0px, right: 0px, and the respective margins to auto.
Here is an example: http://jsfiddle.net/pR4hq/
<style>.center{
position: relative;
display: block;
width: 120px;
background: rgb(90,90,90);
left: 0px;
right: 0px;
margin-left: auto;
margin-right: auto;
text-align: center;
}</style>
<div class="center">Center Content</div>