What I am trying to do is:
HTML
<footer>
<!-- ... -->
<span class="copyright">abc</span>
</footer>
CSS (sass)
footer {
// ...
text-align: center;
> .copyright {
position: absolute;
bottom: 0;
display: inline-block;
}
}
So simply to pull the copyrigh down to the bottom of the parent block and center it. It's pretty easy using position: absolute, however, the centering the way using display: inline-block on the child element and text-align: center on the parent element wouldn't work then.
Is it possible to put the copyright down while keeping it relative?
Flexbox can do that if the height of the parent is defined or resolvable.
Complete Codepen Demo
footer {
height: 150px;
width: 80%;
margin: auto;
border: 1px solid red;
display: flex;
flex-direction: column;
}
header {
background: plum;
}
.copyright {
margin-top: auto;
/* push to bottom */
background: red;
align-self: flex-start;
/* collapse to own width */
margin-left: auto;
/* centering */
margin-right: auto;
}
<footer>
<header>I'm a header</header>
<span class="copyright">Copyright</span>
</footer>
Although I agree flexbox can be used, its browser support is not awesome on IE (Caniuse).
I would use just simple block with text-centering.
JS Fiddle
Here it is in simplicity:
footer {
border: 1px solid #900;
}
footer > .copyright {
padding: 50px 0 10px;
text-align: center;
}
If you really need to use inline-block, add this to copyright CSS:
display: inline-block;
width: 100%;
Related
I have a flex container, with few li elements inside. While adding more li elements inside, the container scretches together in above and down sides. I don't want it to move any further in up, only in down direction.
You can check it on my JSfiddle
Try to add few li elements, you will see that container is scretching. How to block it?
Try this out and see if it is what you are going for. If not I may need some additional info.
.mainContainer {
width: 100vw;
height: 100vh;
display: block;
align-items: center;
justify-content: center;
}
.content {
min-height: 350px;
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
position:relative;
margin:0 auto;
display:block;
top:50%;
margin-top:-25%;
}
First of all, I am using some Jquery here for adding new elements:
So I removed min-height for content
Reset the ul margin-bottom to zero.
The new items are added via JS and are positioned absolutely:
ul.list-group {
margin-bottom: 0;
position: relative;
}
ul .list-group-item.counter{
position:absolute;
width: 100%;
}
The new items are listed one below the other giving the margin-top property:
$('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
Let me know your feedback on this. Thanks!
var newItems = 0;
$('.fixed_btn').click(function(event) {
$('.list-group').append("<li class='list-group-item counter' style='margin-top:" + newItems * 100 + "px'>x</li>");
newItems++;
});
* {
padding: 0;
margin: 0;
border: 0;
font-size: 100%;
vertical-align: baseline;
}
body {
-webkit-font-smoothing: antialiased;
font-family: Raleway;
}
.mainContainer {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.content {
/*min-height: 350px;*/
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
}
.list-group-item {
height: 100px;
}
ul.list-group {
margin-bottom: 0;
position: relative;
}
.fixed_btn {
position: fixed;
top: 0;
left: 0;
}
ul .list-group-item.counter{
position:absolute;
width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="mainContainer">
<div class="content">
<ul class='list-group'>
<li class='list-group-item'>x</li>
<li class='list-group-item'>x</li>
<li class='list-group-item'>x</li>
</ul>
</div>
</div>
<button class="btn fixed_btn">+ Add</button>
If you change your .mainContainer CSS so that the height is auto. Now the list will not move up, but only will move down as you wanted as the height is flexible depending on the content:
.mainContainer {
width: 100vw;
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
Also, if you change the .content CSS so that the min-height is auto it seems to look nicer when there are fewer li elements:
.content {
min-height: auto;
width: 300px;
border-radius: 5px;
background: #f2f2f2;
border: 1px #ccc solid;
}
Updated (again) Fiddle, try to add more li elements
If your looking for the list to stay in position, but when more elements are added to have a scroll but still be fixed see this other Fiddle
inspired by:
Flexbox - Vertically Center and Match Size
fiddle with the problem:
http://jsfiddle.net/Nbknc/22/
what i try to achieve:
I want to get the text of the second button to start at the same height as the text on the first button.
HTML
<section class="buttonsSection">
<a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
<a class="button" href="#">Short Phrase</a>
</section>
CSS
.button {
padding: 10px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
display: flex;
flex-direction: column;
justify-content: center;
}
.buttonsSection {
margin: 30px 0;
display: flex;
justify-content: center;
height: 500px;
}
body
{
width: 20%; /*Simulate page being reduced in size (i.e. on mobile)*/
margin: 0 auto;
}
a photo of how i want it to look
EDIT the reason I use flexbox and justify-content is to make it work with different screen sizes. Space is perfectly distributed with flexbox. Adding a padding is suboptimal as it will stay the same, even if the screen has a height of say 200px.
Here is one way, one where I added an extra wrapper that centers
.buttonsSection {
display: flex;
flex-direction:column;
justify-content: center;
height: 400px;
border: 1px solid;
width: 200px;
margin: 0 auto;
}
.buttonsWrap {
margin: 30px 0;
display: flex;
}
.button {
padding: 50px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
}
<section class="buttonsSection">
<div class="buttonsWrap">
<a class="button" href="#">Very Long Word aaaa xx ccc ddd ee</a>
<a class="button" href="#">Short Phrase</a>
</div>
</section>
You can accomplish this by removing the flexbox properties from the button and adding a span around your button text with the following CSS:
position: relative;
top: 50%;
transform: translateY(-50%);
You may need to play with those percentages to get things to line up ideally, but this gets you in the ballpark.
http://codepen.io/angeliquejw/pen/QNdrOZ?editors=0100
I updated the fiddle
Suggest if its not that you require.
http://jsfiddle.net/Nbknc/30/
.button {
padding: 50% 15px 0 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
}
.buttonsSection {
margin: 30px 0;
display: flex;
flex-direction:row;
height: 500px;
}
Now its much simpler , now you can add the required padding to your button
so that the text in both button will align with equal top padding .
UPDATE
included some changes to your html and css
http://jsfiddle.net/Nbknc/32/
Edit: http://jsfiddle.net/Dneilsen22/36yL3y5m/5/
Removing the justify-content for .button and increasing the top padding would accomplish this.
.button {
padding: 100px 15px;
width: 150px;
background-color: deepskyblue;
color: white;
margin: 3px;
text-align: top;
display: flex;
flex-direction: column;
}
I am creating a site in bootstrap, and I want to know how to vertically center two child divs inside of a parent div. I know this is probably pretty simple, but I have tried everything and it will not work.
(http://codepen.io/cjhill02/pen/VLPERd)
try margin:auto
* {
border: 1px solid #ddd;
}
section {
padding: 100px 0;
margin: auto
}
.col-md-6{
margin: auto
}
for IE9 and IE10 put display:table to parent div and set attribute vallign="middle";display:table-cell to child element
vallign is a basic property supperted by old browsers as well as some new browsers
You can always do it with display: flex;
JS Fiddle
.container {
display:flex;
width:100%;
align-items: center;
justify-content: center;
height: 400px;
border: 4px solid black;
}
.container div {
display:flex;
align-items: center;
justify-content: center;
}
.container > div {
width: 40%;
background-color: red;
height: 221.5433px;
}
.container > div + div {
width: 40%;
background-color: brown;
height: 278.8431px;
}
<div class="container">
<div>centered</div>
<div>centered</div>
</div>
Do we know the height of the parent div? if so you can do like here
.row {
justify-content: center;
position: relative;
top: 50%;
transform: translateY(-50%);
}
Please see here for result.
Within a footer there are 4 small boxes (created with divs that have a red border around them) and they all need to be made responsive to the width of the browser window as it is re-sized. They need to be centered and have an equal percentage space in between each other no matter what the window size is. Boxes have to stay 100px by 100px.
Here is a rough illustration of what I mean: http://s14.postimg.org/58xunsv0h/example_of_boxes.png
#footer {
width: 100%;
clear: both;
text-align: center;
background-color: black;
opacity: 0.7;
height: 200px;
}
#fbox1 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox2 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox3 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
#fbox4 {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: inline-block;
float: left;
}
<body>
<div id="footer">
<div id="fbox1">
</div>
<div id="fbox2">
</div>
<div id="fbox3">
</div>
<div id="fbox4">
</div>
<div>
</body>
You have two very simple ways to do that.
If you are targeting modern browsers, then you could make use of the CSS3 flex model. This is the simplest method. You won't have to change anything in your markup. Of course, I would suggest using the footer tag instead of div, because it semantically is a footer.
In this example, I am omitting browser prefixes for two reasons: (1) brevity of this snippet, and (2) most modern browsers now don't need prefixes for this. This example snippet works perfectly as-is in IE-11, FF-34 and GC-39.
The trick is to use the justify-content: space-around; property to distribute the spacing evenly between the divs. Remember, that space-around will cause the space before the first div and space after the last div to be half of the spacing between divs. This will cause, the spacing after the last div to be large because of the size of the div. To mitigate this, use margin: auto.
Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
And: http://dev.w3.org/csswg/css-flexbox/#propdef-justify-content
Fiddle: http://jsfiddle.net/abhitalks/j8fpp0so/2/
Snippet:
footer {
background-color: #000; opacity: 0.7;
height: 200px;
display: flex;
justify-content: space-around; /* this is important */
align-items: center; text-align: center;
}
footer > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<footer>
<div></div>
<div></div>
<div></div>
<div></div>
<footer>
If you really need to support older browsers i.e. back up to IE-8, FF-31, GC-31 etc., then you could make use of display:table and display:table-cell to achieve that. This is also very simple, but you would have to change your markup a little bit. Just wrap your inner-divs inside wrapper-divs. Apply display to the footer container and the wrapper-divs.
The trick here is to use the display:table-cell on the wrapping divs which, will cause them to evenly distribute. But, this will cause them to stretch. To mitigate this, we apply vertical-align to the wrapper divs and also a margin: auto to the inner divs.
Fiddle: http://jsfiddle.net/abhitalks/Lvysyuuh/
Snippet:
#footer {
background-color: #000; opacity: 0.7;
width: 100%; height: 200px;
display: table; /* this is important */
}
#footer > div {
display: table-cell; /* this is important */
text-align: center; vertical-align: middle; /* this is important */
}
#footer > div > div {
border: 1px solid red;
width: 100px; height: 100px;
margin: 0 auto; /* this is important */
}
<div id="footer">
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div><div></div></div>
<div>
//HTML BLOCK
<div id="footer">
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div class="fbox"></div>
<div>
//CSS BLOCK
#footer {
display: flex;
display: -webkit-flex;
justify-content: center;
-webkit-justify-content: center;
align-items: center;
-webkit-align-items:center;
width: 100%;
background: black;
opacity: 0.7;
height: 200px;
}
.fbox {
display: flex;
display: -webkit-flex;
flex: 1;
-webkit-flex: 1;
min-height: 100px;
min-width: 100px;
max-width: 100px;
max-height: 100px;
margin: 0 auto;
border: 5px outset #ea2f2f;
}
Alternative to flex box if you can't use that for compatibility reasons:
The formula for the width of the space between blocks is (footer_width - 4*box_width)/5. Basically you've got a percentage width minus a fixed width: footer_width/5 - 4*box_width/5 ->
20% of footer width - 4*110px/5 -> 20% - 88px. Note the boxes actually take up 110px because of the border. We can do this at least two ways:
Using float:
You want 20% - 88px between each box. Float each box to the left with a margin-left of 20%. Then pull the boxes to the left by setting a negative right margin on each box. this does not effect the first box, but does make the space between boxes correct, so position all of them relatively and move them over 88px to the left.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
float:left;
margin-left:20%;
margin-right:-88px;
position:relative;
left:-88px;
top:45px;
}
This way feels a little fragile to me, but I can't immediately see why...
Using absolute positioning:
You want 20% - 88px between each box. Start with the first box. Move it over 20%, then back left 88px by using the left and margin-left properties. Next box we need to move the same, but from the right edge of the first box, so we need to move it over 20% - 88px + 110px to get to the right edge of the first box, then the +20% - 88px again, giving 40% - 66px. Repeat for each box. You can see the pattern below. Note the position:relative on #footer.
#footer {
width: 100%;
clear: both;
background-color: black;
opacity: 0.7;
height: 200px;
box-sizing: border-box;
position: relative;
}
div div {
border: 5px outset #ea2f2f;
width: 100px;
height: 100px;
position: absolute;
top:45px;
}
#fbox1 {
left: 20%;
margin-left: -88px;
}
#fbox2 {
left: 40%;
margin-left: -66px;
}
#fbox3 {
left: 60%;
margin-left: -44px;
}
#fbox4 {
left: 80%;
margin-left: -22px;
}
You might also be able to use inline-block with text-align:justify as seen here: "text-align: justify;" inline-block elements properly?
Hope this helps!
EDIT:
Just noticed your req that they be vertically centered as well. In this case, because you have a fixed height container and fixed height boxes, in both cases above you just have to nudge each box down by (200px - 110px)/2 = 45px which can be done with top:45px;.
I'm trying to use the table-cell way to center a div vertically and horizontally.
It works when I use the following code:
div {
display: table;
}
.logo {
display: table-cell;
position: absolute;
vertical-align: middle;
left: 0;
right: 0;
bottom: 0;
top: 0;
margin: auto;
}
But I'd rather wrap .logo in another div called .center like here JSFiddle, but for some reason, although it works in JSFiddle, it isn't working for me on my site.
Here is a good starting point.
HTML:
<div class="containing-table">
<div class="centre-align">
<div class="content"></div>
</div>
</div>
CSS:
.containing-table {
display: table;
width: 100%;
height: 400px; /* for demo only */
border: 1px dotted blue;
}
.centre-align {
padding: 10px;
border: 1px dashed gray;
display: table-cell;
text-align: center;
vertical-align: middle;
}
.content {
width: 50px;
height: 50px;
background-color: red;
display: inline-block;
vertical-align: top; /* Removes the extra white space below the baseline */
}
See demo at: http://jsfiddle.net/audetwebdesign/jSVyY/
.containing-table establishes the width and height context for .centre-align (the table-cell).
You can apply text-align and vertical-align to alter .centre-align as needed.
Note that .content needs to use display: inline-block if it is to be centered horizontally using the text-align property.
This would be easier to do with flexbox. Using flexbox will let you not to specify the height of your content and can adjust automatically on the height it contains.
DEMO
here's the gist of the demo
.container{
display: flex;
height: 100%;
justify-content: center;
align-items: center;
}
html
<div class="container">
<div class='content'> //you can size this anyway you want
put anything you want here,
</div>
</div>