Ok, so I am mightly confused to what I guess should be simple. Take the code below, just started using Bootstrap so probably not perfect but sufficient for an example.
<div class="row">
<div class="col-md-12">
<div class="col-md-4">
<h1>Logo Text</h1>
</div>
<div class="col-md-8">
<ul> Navbar.... </ul>
</div>
</div>
</div>
So imagining that code above is my header, how can I ensure that both sides for logo and navbar are centered horizontally and vertically in the their respective div's?
I suspect I need to use a table, table-cell, vertical-align: center but is that really efficient or right?
Need to remain responsive.
Thanks
Try this class:
.vertical_align_middle {
position: relative;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
/* etc */
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.vertical_align{
position: relative;
top: 50%;
transform: translateY(-50%);
}
If all you want is to center vertically, all you need is to setup your padding: 10px 0; and play around with that 10 until you get it lined up. It will help if you cascade a clearfix class to the col-md-8. Now, that is the short sweet and simple (SSS) answer. But you mentioned you are now using Bootstrap. If I were you, I would use the Bootstrap navbar and modify accordingly. The whole idea of using such a robust framework is to make sure you take advantage of all the bells and whistles that come with it with less coding time.
I built a sample here
Actually I just thought about it for a minute.
If I set one of the inner divs to this
.inner {
height: 100px;
display: table;
}
Then on the actual content that I want to position
.pos {
display: table-cell;
text-align: center;
vertical-align: middle;
}
So I guess the important thing here is you need to set a height either by % or something more specific so that the alignment has something to work from. And of course set the entire div to be a table with the content of the div a table-cell.
Is that the right way?
.col-md-8, .col-md-4 {
display: flex;
align-items: center; // Vertical
justify-content: center; // Horizontal
}
Related
This is the layout image:
As you can see in the image, the images of the phones are sticking out of the blue container.
I have tried several things, such as:
I tried to use a grid with 5 rows where a <div> tag expanded all the rows and was set to have its background as the phone images. Then I set the blue background box to use only the rows form 2-4.
This somehow did the trick, but when the browser window was resized the image started to shrink and be positioned in a funky way.
As a newcomer to CSS I want to avoid negative margins because I have read they are "evil".
Is there any way to accomplish this in a clean/non-hacky way?
You can use the transform property to move the images where they need to be.
You'll need to build your layout as usual, but without the images being raised/lowered outside their default position.
Once you've done that, you can use transform: translateY(-100px) to raise or lower the images into their target position.
A quick example of this can be shown using <div> tags:
/* Setup some basic layouts to mimic the layout required */
.container {
padding-top: 100px;
padding-bottom: 100px;
}
.banner {
height: 200px;
background: blue;
display: flex;
justify-content: center;
align-items: center;
}
.image-1 {
height: 200px;
width: 200px;
background: red;
transform: translateY(-50px); /* move the image up */
}
.image-2 {
height: 200px;
width: 200px;
background: green;
transform: translateY(50px); /* move the image down */
}
.example-filler {
}
<div class="container">
<div class="banner">
<div class="image-1"></div>
<div class="image-2"></div>
<div class="example-filler">Lorem ipsum</div>
</div>
</div>
If you don't wan't to use negative margins (which are fine in this situation). You can try to give these styles to your image.
img {
position: relative;
top: -100px;
}
You can learn more about the "position" property here.
It is very important for beginners to understand how it works.
I have a div that I want to position at the center of a page(both vertically and horizontally).
For centring it horizontally I used the center tags around the div and for vertically centring it is tried a couple of things but none of them actually working.
Check out the code:
CSS:
.vcenter{
height: 50px;
width: 50px;
background: red;
vertical-align: middle;
margin-top: calc(50% - 25px);
}
HTML :
<center>
<div class="vcenter">
</div>
<center>
Also I don't think using centre tags around the the div to centre an object is the best way to so it.
What I want to know is
How can I centre the div both vertically and horizontally no matter what the size of the screen is ?
Is there a better way to centre the div horizontally rather than using the center tags ?
If available, using flex is the easiest. Apply these styles to the container in which you want to center your div:
display: flex;
align-items: center;
justify-content: center;
#divId {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
The only thing that isn't obvious is the transform takes into account the size of the element.
It's a very common situation: a designer tells me that some piece of text should be vertically centered, but I can't use the display:table-cell; hack because the containing element needs to have a different display property. I also don't want to have to use any position:absolute due to the problems that presents.
Fiddle: https://jsfiddle.net/z824m656/1/
HTML
<div class="contents-vertically-centerd">
<img src="https://blog.stackoverflow.com/images/wordpress/stackoverflow-logo-300.png" width="150"/><span>Here's some text that I want vertically centered with respect to the image</span>
</div>
CSS
div.contents-vertically-centerd { padding: 10px; border: 1px dashed #000000; }
You need to vertically align the image, not the text.
Have you tried:
div img {
vertical-align: middle;
}
In the kind of situation you describe, it will also assist you if you:
explicitly declare the height of the image
declare the display of the <span> text as inline-block
explicitly declare the height of the <span>
explicitly declare the line-height of the <span>
Here's an updated fiddle using vertical-align: middle;
https://jsfiddle.net/z824m656/2/
div.contents-vertically-centerd * {
vertical-align:middle;
}
You can use vertical-align: middle but keep in mind this only aligns inline (or inline-block content). So it should go like:
div.contents-vertically-centerd img, div.contents-vertically-centerd span {
display: inline-block;
vertical-align: middle;
}
For your special use case, there’s a simple solution: Use vertical-align: middle on the image. It will center the text to the image. Here’s the updated Fiddle.
Another option is the transform: translateY(-50%) method.
.element {
position: relative;
top: 50%;
transform: translateY(-50%);
}
div {
height: 200px;
/* Used to center horizontally */
text-align: center;
}
p {
position: relative;
top: 50%;
transform: translateY(-50%);
}
<div>
<p>This text is vertically centered.</p>
</div>
A more detailed write-up here.
I created a featured block with HTML5 and CSS3. This block includes a background-image and some text heading. You can see it live here: http://codepen.io/anon/pen/yNWxBb
As you can see I am now using margin-top to center the text in the vertical middle of the block. And make use of the pseudo-class ::after to add a transparant dark overlay above the background-image.
I know you can vertical align a div using table in combination with table-cell and vertical-align: middle, but than it messed my markup.
Does anyone know how to fix this? And is this the right markup to do this? Or should you recommend an other markup and manner to add the transparant background to the image?
Look out to you answer/advice.
Thank you in advance.
Two possible solutions to your problem:
http://www.smashingmagazine.com/2013/08/absolute-horizontal-vertical-centering-css/
http://philipwalton.github.io/solved-by-flexbox/demos/vertical-centering/
And yes, you might want to alter the markup in order to make this possible but both articles I'm pointing you to come with example code.
I do believe this is your solution. Just replace this class in your css and it will work fine I guess.
.features figcaption header {
position: absolute;
top: 50%;
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
margin-left: auto;
margin-right: auto;
font-size: 24px;
line-height: 34px;
color: #FFF;
//position: absolute;
//top: 28%;
}
I am trying to center items (vertically and horizontally) within a div. I have looked around here and other places and can't seem to get anything to work. What I am looking for is to have each item centered both vertically and horizontally in its respective div. Notice that there are two navigation tiles on the left and 4 on the right (1 div per tile). The divs also have parent divs which I used to build the sticky footer. The challenge is that it needs to be responsive so I cannot used fixed pixels.
.absolute-center {
position: relative;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
The above is what I tried to get the content centered. Its not working unfortunately.
Here's the fiddle: https://jsfiddle.net/jmc3t164/
Any help is greatly appreciated!
You have this structure (shortened for brevity)
<div class='top-half'>
<p class='absolute-center'>Time left to order</p>
</div>
<div class='bottom-half'>
<p class='absolute-center'>Add Produce</p>
</div>
Centering both vertically and horizontally is often acheieved by
.absolute-center {
position: absolute; /* note */
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
BUT this requires that the parent element (in which the child will be centered) has position:relative.
So, you need to add that
.top-half {
width: 100%;
height: 50%;
position: relative;
}
.bottom-half {
width: 100%;
height: 50%;
position:relative;
}
JSFiddle Demo
<div id="blahblah" style="width:90%;margin:auto 5%"> content </div><br> blahblah can be any id you want, or not necessary.<br> You definitely need a width of something, ideally less than 100%; and divide the remainder from 100 by 2 and set it as margin. ( margin: auto is for up and down margings, the 5%, or whatever is for left / right.
Another way is to have a class .center{text-align:center} and assign it to your Div.
Finally, yet another is to insert a div under your position relevant div and style it with 'text-align:center.