This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Closed 7 years ago.
I'm trying to vertically (and horizontally) center a div (height and width unknown) in a Bootstrap column. I can horizontally center the div by setting text-align to center. However I am struggling to vertically center the div. Here is a snippet of my code:
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12">
<div style="text-align: center"> <!--this works-->
<p>Content goes here</p>
</div>
</div>
</div>
Thanks in advance!
If you're using Twitter Bootstrap and you have the Bootstrap 3, they added <div class="center-block">...</div>.
Reference: Bootstrap v3.1.1.
You may want to give this a shot:
<div class="row">
<div class="col-md-8 col-md-offset-2 col-xs-12 Outer">
<div class="Inner>
<p >Content goes here</p>
</div>
</div>
</div>
/* CSS Code */
.Outer {
border: 1px solid black; /* Just so you can see it centered vertically */
display: table-cell;
height: 100%;
min-height: 15em; /* Set to height you need */
}
.Inner > p {
vertical-align: middle;
text-align: center;
margin: 0 auto;
}
Keep in mind that the browser will automatically recognize the resolution width;
however, the same functionality doesn't apply to height. You need to set a specified
height on the outer element in order for the inner content to have something to
vertically align itself to. Hope this helps!
Related
This question already has answers here:
Vertical alignment of column rows in Bootstrap grid
(2 answers)
Closed 4 years ago.
I have a really basic html structure that has a single row split in to two even columns. I have two equally sized images and require one to be horizontally and vertically centred in each column.
<div class="container">
<div class="row">
<div class="col-md-6">
<img src="example.png" />
</div>
<div class="col-md-6">
<img src="example.png" />
</div>
</div>
</div>
A wireframe of how the pages should look is as follows:
I thought this could be achieved through bootstraps centre classes. I have also tried custom css using flexbox. I feel I am missing something as I expected this to be fairly simple but my images float at the top of the page.
Layout them as a table in CSS
.container .row {
display: table;
width: 100%;
}
.container .col-md-6 {
display: table-cell;
text-align: center;
vertical-align: middle;
}
Taken from https://css-tricks.com/centering-in-the-unknown/
This question already has answers here:
Vertically aligning an image to the bottom inside a bootstrap “column”?
(1 answer)
How can I make Bootstrap columns all the same height?
(34 answers)
Closed 5 years ago.
I'm using Bootstrap and trying to position these 3 images at the bottom without any success. Could you help?
JSFIDDEL
HTML:
<div class="row">
<div class="col-xs-2">
<img src="https://s10.postimg.org/730mt4y5l/image.jpg" class="img-responsive first">
</div>
<div class="col-xs-8">
<img src="https://s10.postimg.org/yp3edthih/image.jpg" class="img-responsive second">
</div>
<div class="col-xs-2">
<img src="https://s10.postimg.org/z4j9kkstl/image.jpg" class="img-responsive third">
</div>
</div>
CSS:
.row {
border-bottom: 1px solid red;
position: relative;
}
.first {
}
.second {
}
.third {
}
The 3 images are of different dimensions. I would like to position them in such a way that all the images seat on the red border line.
For now, I only see to regulate with margin_top or padding_top, and responsive regulate with media switch.
style='margin_top:150px;'
This question already has answers here:
CSS - how to overflow from div to full width of screen
(3 answers)
Closed 7 years ago.
I need to put a background image in the middle of a page like this below.
A way would be to close the div container and put it back after my image. But I don't think that's the best way, so here I come to find some help.
My HTML :
<div class="container">
<div class="job">
<h4>Disc Jockey</h4>
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<p>
Lorem ipsum...
</p>
</div>
</div>
</div>
</div>
And in my css :
.job{
margin-top: 75px;
background:url(../img/bg-about.jpg) no-repeat center top scroll;
background-size: 100% auto;
height: 357px;
width: 1920px;
}
Thanks in advance.
Try to add class .job to <div class='container job'></div> I think it must help you
I have this jsfiddle: Sample
As you can see 2 divs are align together side by side, what I want is to vertically aligning them. Also I want to be able to add another div to float to the right which is also vertical aligned.
How can I able to aligned them without using absolute positioning?
<div style="background-color: blue; ">
<!-- Global Header -->
<div class="header">
<div class="floatLeft">
WritePub
</div>
<div id="pcontainer" class="inner-header-search floatLeft">
<input type="text"/>
</div>
</div>
</div>
Your fiddle is too noisy. If you want to vertical align the contents of a div without touching its height you can add "display: table-cell" to the div to simulate a table row column which gives you alignment.
http://jsfiddle.net/5peh12th/2/
<div class="container">
Hello: <input type="text-box"/>
</div>
.container {
display: table-cell;
width: 800px;
background-color: red;
height: 50px;
vertical-align: middle;
}
or you can just not give the div a height and give top and bottom padding of equal numbers
I have a row with content which should be in the center of the site and a footer at the bottom. The content are divided into two 6 column. i want it to center align vertically according to the screen size. so i tried to give some percentage of top with a position relative but it doesn't work out.
If i give margin-top it is working. In order to make the top we have to give the position, so i have given it relative I don't want position absolute then the footer will come at the top of the site. Other content also will come top i thnik.
How to center align the contents and footer should stay at bottom all time all display size.
HTML
<div class='row'>
<div class='col-md-6 vertical'> content</div>
<div class='col-md-6 vertical'>content right</div>
</div>
<footer>sit at bottom</footer>
CSS
.vertical{
position:relative;
/* margin-top:20%; */ /*works*/
top:20%; /*not works even providing position */
}
JSFIDDLE NOTE: Don't forgot to resize the window then only you can able to see the two column division
<div class='row'>
<div class='col-md-6 '>
<div class="vertical"> content</div>
</div>
<div class='col-md-6 '>
<div class="vertical"> content</div>
</div>
</div>
<footer>sit at bottom</footer>
.vertical{
display: table-cell;
vertical-align:middle;
height: 200px /* Accordingly */
}
Working Fiddle Fiddle.
Apart from using display: table-cell, there is one more way to do it but is not so cross-browser at this moment. Take a look at CSS3 Flexbox.