is there any way to center html elements vertically or horizontally inside the main parents?
This question is related to
css
twitter-bootstrap
For future visitors to this question:
If you are trying to center an image in a div but the image won't center, this could describe your problem:
<div class="col-sm-4 text-center">
<img class="img-responsive text-center" src="myPic.jpg" />
</div>
The img-responsive class adds a display:block instruction to the image tag, which stops text-align:center (text-center class) from working.
SOLUTION:
<div class="col-sm-4">
<img class="img-responsive center-block" src="myPic.jpg" />
</div>
Adding the center-block class overrides the display:block instruction put in by using the img-responsive class.
Without the img-responsive class, the image would center just by adding text-center class
Also, you should know the basics of flexbox and how to use it, since Bootstrap4 now uses it natively.
Here is an excellent, fast-paced video tutorial by Brad Schiff
Here is a great cheat sheet
bootstrap 4 + Flex solve this
you can use
<div class="d-flex justify-content-center align-items-center">_x000D_
<button type="submit" class="btn btn-primary">Create</button>_x000D_
</div>it should center centent horizontaly and verticaly
I discovered in Bootstrap 4 you can do this:
center horizontal is indeed text-center class
center vertical however using bootstrap classes is adding both mb-auto mt-auto so that margin-top and margin bottom are set to auto.
i use this
<style>
html, body {
height: 100%;
margin: 0;
padding: 0 0;
}
.container-fluid {
height: 100%;
display: table;
width: 100%;
padding-right: 0;
padding-left: 0;
}
.row-fluid {
height: 100%;
display: table-cell;
vertical-align: middle;
width: 100%;
}
.centering {
float: none;
margin: 0 auto;
}
</style>
<body>
<div class="container-fluid">
<div class="row-fluid">
<div class="offset3 span6 centering">
content here
</div>
</div>
</div>
</body>
Updated 2018
In Bootstrap 4, the centering methods have changed..
Horizontal Center in BS4
text-center is still used for display:inline elementsmx-auto replaces center-block to center display:flex childrenoffset-* or mx-auto can be used to center grid columnsmx-auto (auto x-axis margins) will center display:block or display:flex elements that have a defined width, (%, vw, px, etc..). Flexbox is used by default on grid columns, so there are also various flexbox centering methods.
Demo Bootstrap 4 Horizontal Centering
For vertical centering in BS4 see https://stackoverflow.com/a/41464397/171456
From the Bootstrap documentation:
Set an element to
display: blockand center viamargin. Available as a mixin and class.
<div class="center-block">...</div>
With bootstrap 4 you can use flex
<div class="d-flex justify-content-center align-items-center">
<button type="submit" class="btn btn-primary">Create</button>
</div>
source: bootstrap 4.1
for bootstrap4 vertical center of few items
d-flex for flex rules
flex-column for vertical direction on items
justify-content-center for centering
style='height: 300px;' must have for set points where center be calc or use h-100 class
<div class="d-flex flex-column justify-content-center bg-secondary" style="
height: 300px;
">
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
<div class="p-2 bg-primary">Flex item</div>
</div>
You may directly write into your css file like this :
.content {_x000D_
position: absolute;_x000D_
top: 50%;_x000D_
left:50%;_x000D_
transform: translate(-50%,-50%);_x000D_
}<div class = "content" >_x000D_
_x000D_
<p> some text </p>_x000D_
</div>for horizontaly centering you can have something like this:
.centering{
float:none;
margin:0 auto
}
<div class="span8 centering"></div>
I like this solution from a similar question. https://stackoverflow.com/a/25036303/2364401 Use bootstraps text-center class on the actual table data <td> and table header <th> elements. So
<td class="text-center">Cell data</td>
and
<th class="text-center">Header cell data</th>
Source: Stackoverflow.com