I have spent hours on this problem now and have read through countless questions, but none of the provided solutions works for me, so I'm now just gonna post my specific problem:
I want to build a row with four columns. The first three columns have pictures in them and the fourth column has a text description that I want to show vertically centered (meaning with an equal margin on the top and bottom that is obviously not fixed, but responsive to changing screen-sizes). Here's the code:
<section>
<div class="container-fluid">
<div class="row">
<div class="col-lg-4 col-sm-6">
<img ...>
</div>
<div class="col-lg-4 col-sm-6">
<img ...>
</div>
<div class="col-lg-3 col-sm-6">
<img ...>
</div>
<div class="col-lg-1 col-sm-6">
<div class="container-fluid">
<p>Some text that is supposed to be vertically centered within the column</p>
</div>
</div>
</div>
</div>
</section>
It must have to do something with the Bootstrap specific classes that non of the CSS-based solutions I can find on this works. How can I make it work in this particular example? Feel free to make any changes you want on this part:
<div class="container-fluid">
<p>Some text that is supposed to be vertically centered within the column</p>
</div>
However the rest of the structure should remain unchanged if possible (including the col-lg-1).
Your help is greatly appreciated!
In Bootstrap 4, add "align-self-center"-class to the col, where you want the content centred vertically.
You can use flexbox. Make your outer div, display: flex and use The property align-items to make it's contents vertically center. Here is the code:
#outerDiv{
display: flex;
align-items: center;
flex-wrap: wrap;
}
All you need to do is adding below snippet to your CSS.
just like this.
.row{ display: flex; align-items: center;}
I tried the same code and got output too. if you want to see, download the file and run it.
https://www.dropbox.com/s/0x7iqi6alayd8xg/VerticallyCentered.html?dl=0
The following code will center items perfectly within a div:
display: -webkit-flex; /* Safari */
-webkit-justify-content: space-around; /* Safari 6.1+ */
display: flex;
justify-content: space-around;
justify-content: center;
Related
I am trying to make a little website that should have two columns, and each column should have its content centered.
However, I have noticed that the columns will follow the height of each other, and not act as individual columns. E.g. whenever I add content to one of the columns, the content of the other column will be moved to fit the height of that column.
In the JSFiddle, you can see that the "Hello" on the right side is not completely centered; it has been moved up to stand in line with the first of three "Hello"'s on the left side. I would like it so, that whenever I add content to one column, it doesn't affect the other - so the "Hello" on the right side should ideally stay completely centered.
JSFiddle: https://jsfiddle.net/goupb2ch/1/
I have worked on this for quite a while now. Any ideas? Thanks!
Consider using flexbox to solve your problem: in this case far less code is required.
https://jsfiddle.net/upwgk2u4/
.container {
display: flex;
text-align: center;
height: 100%;
}
.container > div {
flex: 1;
align-self: center;
}
Why not use what's already in Bootstrap 4? No extra CSS is needed.
https://www.codeply.com/go/0zwGz83Cbw
<div class="container">
<div class="row">
<div class="col-md-6 text-center">
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>
<div class="col-md-6 align-self-center text-center">
<p>Hello</p>
</div>
</div>
</div>
I'm working on a really simple Html/Bootstrap website.
I'm using owl-carousel library to display and slide multiple paragraphs.
The problem is that when displaying on small devices, these paragraphs will not have the same height, depending on how long they are.
I would like all my owl-item div or paragraph to be aligned vertically within the owl-wrapper div. I tried few display combinations, and also the owl carousel's autoHeight: true option but it does not work as I except.
See the pictures, the little paragraph is displayed on the top of the owl-wrapper div, but I would like it to be centered vertically:
<div class="container">
<div class="caption text-center text-white" data-stellar-ratio="0.7">
<div id="owl-intro-text" class="owl-carousel">
<div class="item">
<h1>Oscar Götting</h1>
</div>
<div class="item">
<h1>Let's build something together</h1>
</div>
</div>
</div>
</div>
Add this to your CSS
.owl-carousel .owl-stage { display: flex; align-items: center; }
On this website: http://www.livenews.surf/ I want to make news images and text vertically middle align, how i can do that?
Use the following classes in your containing div.row instead of custom CSS as suggested for bootstrap 4.
d-flex flex-wrap align-items-center
The easiest solution is to use Flexbox (see spec. for more details on it's usage).
For this particular case, assign a custom class to each of your content containing div (currently it only has .col-md-11), for example class "content" and add this code to your stylesheet
.content {
display: flex;
align-items: center;
flex-wrap: wrap;
}
Small code explanation: align-items aligns the items vertically, since we left the default flex direction which is row and flex-wrap will allow our parent container to wrap children to next line (default is nowrap).
Keep in mind, that I haven't included vendor prefixes for the sake of this answer, however I would strongly recommend you to do so, using a tool such as Autoprefixer.
Well, As you are using bootstrap columns, so you will need to make by following a couple of steps as explained below:
As a general case html structure of your web page is as follows:
<div class="col-md-11">
<div class="col-md-5">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
<div class="col-md-7">
// text goes here
</div>
</div>
First of all you will need to make the height of both columns (image + text) same. For this you can use jQuery matchHeight.
After that you can make your images vertically centered with the help of following change.
<div class="col-md-5 photo">
<a href="#">
<img src="images/image.jgp">
</a>
</div>
.photo {
display: table;
}
.photo a {
vertical-align: middle;
display: table-cell;
}
.photo img {
display: block;
height: auto;
width: 100%;
}
Here is Plnkr.
I must be missing something obvious here, but I am a beginner with Bootstrap and I have no idea what it could be. I'm trying to get this picture and the adjacent paragraph to stack vertically on xs screens. No matter what I do, they just line up alongside each other, pushing the picture to the edge of the screen. Here's a picture of what is happening, and my code.
<div class="row para-text vertical-align">
<div class="col-xs-12 col-md-8 col-md-push-4">
<p>text....</p>
</div>
<div class="clearfix visible-sm-block"></div>
<div class="col-xs-12 col-md-4 col-md-pull-8">
<img class="img-full" src="img/artesia1.jpg" alt="">
</div>
</div>
Here are the css styles I've added, in case those are causing problems
.para-text {
padding:15px;
}
.vertical-align {
display: flex;
align-items: center;
}
I would recommend not using your css classes that you posted. When I did a simple example with your html code but no css, it seems to work fine:
Please see: http://www.bootply.com/GCu0vDtk6K
Note: I also removed your:
<div class="clearfix visible-sm-block"></div>
Looks like my problem was using Flexbox. I've opted out of using it and am going to find a different way to vertical align the image so that I can have better browser support.
I'm using Bootstrap 3.
I have a series of rows with two columns. The first column displays text and the second column has an image. I want to vertically centre the text in the first column relative to the row it's in so it aligns nicely with the adjacent image.
Example HTML:
<div class="container">
<div class="row">
<div class="col-sm-6">
<h2>Some heading</h2>
<p>I want all this text centred relative to the image next door</p>
</div>
<div class="col-sm-6 image">
<img class="img-responsive" src="http://i.imgur.com/cztLHHo.png"/>
</div>
</div>
</div>
Note that I'm using the Bootstrap img-responsive class to correctly resize images for mobile devices.
JSFiddle
What I'm seeing is this:
What I want to achieve is this:
I'm sure this is a commonly performed bit of CSS ninja action but I can't find a good example of it. Can anybody help? I would prefer a CSS solution.
Take a look at this fiddle link
i have used the following property in css
.row
{
display: flex;
align-items: center;
}