I want to center automatically a div on my paga using bootstrap 3 but I cannot achieve it. I got an image (with a fixed responsive height) and I want the text to be centered (horizontally and verticaly)
I've made a bootly : https://www.bootply.com/4AyZFwlOdE
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.image {
height:500px;
background:yellow;
}
<div class="image">
<div class="container">
<div class="row">
<div class="col-xs-6 col-md-8 col-lg-10 vcenter">
<div style="text-align:center; height:3em;border:1px solid #F00">Small</div>
</div>
</div>
</div>
</div>
<div class="image">
<div class="container">
<div class="row align-items-center">
<div class="col-xs-8 col-lg-8 col-md-offset-2" >
<div style=" border:1px solid #F00;"><img src="http://www.dm-3.com/wp-content/uploads/2013/06/example.png" stlye="margin:0 auto"></div>
</div>
</div>
</div>
</div>
CSS
.vcenter {
display: inline-block;
vertical-align: middle;
float: none;
line-height: 3em;
text-align:center;
height:3em;
border:1px solid #F00;
}
.image {
height:500px;
background:yellow;
}
https://www.bootply.com/uAp4vN69nk
Different ways of aligning content in the center(horizontal and vertical) given in the codepen link below:
.style2{
display: table;
width: 100%;
height: 30vh;
background-color: #8E113F;
margin-bottom: 20px;
div{
display: table-cell;
vertical-align: middle;
text-align: center;
color: #fff;
}
}
https://codepen.io/kk2989/pen/LNjojY
Related
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I Need to wrap the text in the right side respecting the left side and the column on the right in gray.
I have tried everything and searched on the internet, nothing seems to work.
I put min-width to the table-cell in the left side but then it takes space on the gray side.
add display:inline-block in stretch class and set your desire width
.container{
background-color: gray;
}
.listing-row{
display: table;
width: 100%;
margin 0;
}
.listing-row-inner{
display: table-row;
background-color: yellow;
}
.tc{
display: table-cell;
border: 1px solid black;
}
.listing-row-image{
width: 30%;
}
.listing-row-content{
width: 70%;
}
.stretch {
width : 40px;
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: inline-block;
}
.abs{
position: absolute;
right: 20px;
top:0px;
background-color: #0BB7A5;
display: block;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row container">
<div class="col-sm-8">
<div class="listing-row">
<div class="listing-row-inner">
<div class="tc listing-row-image" >left</div>
<div class="tc listing-row-content">
<span class="stretch">
BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB
</span>
<span class="abs">AA</span>
</div>
</div>
</div>
</div>
<div class="col-sm-4"></div>
</div>
I want the div which displays "D" to appear beneath that one which displays "A" so that divs with matching background colours appear stacked over one another. However, I am getting this:
Where exactly in my CSS code must I clear my float?
#container {
background-color: #333333;
width: 990px;
}
#left {
background-color: red;
width: 300px;
float: left;
}
#splitter {
background-color: green;
width: 90px;
float: left;
}
#right {
background-color: blue;
width: 200px;
float: left;
}
<div id="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div id="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
You have to deal with floats and for this you need to understand what floats and BFC are :
a few ways to do this, that you should understand once you been reading a bit about floats, clearing and Block formating context.
(last example in the snippet below, oldish, even avoids the floats but does the layout)
/* DEMO purpose : Show the id or class being used on that container*/
section:before {
content: attr(id)' 'attr(class);
display: table;
background: #177EE5;
padding: 5px;
margin: 5px;
color: #fff;
text-shadow: 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black, 0 0 1px black;
letter-spacing: 1px;
font-variant: small-caps;
}
/* your css turned into class to be valid since used for many tags */
.container {
background-color: #333333;
width: 990px;
}
.left {
background-color: red;
width: 300px;
float: left;
}
.splitter {
background-color: green;
width: 90px;
float: left;
}
.right {
background-color: blue;
width: 200px;
float: left;
}
/* wrapper for each examples */
section {
clear: both;
overflow: hidden;
margin: 1em;
}
/* different ways shown, usefull for testing only if you read about floats and dig a bit */
/* table */
.table .container {
display: table;
}
/* overflow */
.overflow .container {
overflow: hidden;
}
/* float */
.float .container {
float: left;
}
/* flex */
.flex .container {
display: flex;
}
/* inline-block */
.inline-block .container {
display: inline-block;
vertical-align: top;
}
/* last examples without floats */
/*no float & ie8 */
#table div {
float: none
}
#table #first-row,
#table > div {
display: table-row;
}
#table > div > div {
display: table-cell;
}
#table {
background-color: #333333;
width: 990px;
table-layout: fixed;
}
#left {
width: 300px;
}
#splitter {
width: 90px;
}
#right {
width: 200px;
}
#table > div > div {
background-color: red;
}
#table > div > div + div {
background-color: green;
}
#table > div > div + div + div {
background-color: blue;
}
#table:before {
display: table-caption;
width: 100%;
margin: 0;
}
#table > div:after {
content: "Notice there's a gap to fill here since cols do not cover the 990px";
display: table-cell;
}
<section class="your CSS :-: no BFC involved">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="table">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="overflow">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="float">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="flex">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<section class="inline-block">
<div class="container">
<div class="left">A</div>
<div class="splitter">B</div>
<div class="right">C</div>
</div>
<div class="container">
<div class="left">D</div>
<div class="splitter">E</div>
<div class="right">F</div>
</div>
</section>
<p>another way without float including IE8 ?</p>
<section id="table" class="table">
<div id="first-row">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div>
<div>D</div>
<div>E</div>
<div>F</div>
</div>
</section>
There could be more examples from the same chunks of code and floatting children.
Clear the floats in the container.
You have 3 simple ways to do that:
1. Float
#container {
clear: both;
}
2. Overflow
#container {
overflow: hidden;
}
3. Micro clearfix hack
Link
Here is what you want done bro..
this one is by using display:inline-block https://jsfiddle.net/p4domjrb/
this one is by using float:left https://jsfiddle.net/p4domjrb/1/
.container {
background-color: #333333;
width: 990px;
display: block;
position: relative;
}
.left {
background-color: red;
width: 300px;
display: inline-block;
margin-left: -4px;
}
.splitter {
background-color: green;
width: 90px;
display: inline-block;
margin-left: -4px;
}
.right {
background-color: blue;
width: 200px;
display: inline-block;
margin-left: -4px;
}
don't use id I suggest use class isntead because idis called only once.
<style>
.container{
background-color: #333333;
width:990px;
display:block;
clear:both;
}
#left{
background-color: red;
width:300px;
float:left;
}
#splitter{
background-color: green;
width:90px;
float:left;
}
#right{
background-color: blue;
width: 200px;
float:left;
}
</style>
<body>
<div class="container">
<div id="left">A</div>
<div id="splitter">B</div>
<div id="right">C</div>
</div>
<div class="container">
<div id="left">D</div>
<div id="splitter">E</div>
<div id="right">F</div>
</div>
</body>
result is
I'm using CSS to size and center images in bootstrap col-md-4's and everything is centering ok except the actual caption container. I used text-align which centered the text but can't figure out how to align the entire caption center. Do I need to figure out the pixels and margin-left it? Thanks for any help, I'm sure it's easy! http://http://codepen.io/chiggory/pen/xOZXQB
<div class="container">
<div class="row">
<div class="col-md-4 border"><img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg">
<div class="caption">Test</div>
</div>
</div>
.size {
height: 230px;
width: 230px;
display: block;
margin-left: auto;
margin-right: auto;
border:5px solid #800000;
}
.caption {
font-size: 20px;
color: white;
text-align: center;
background-color: #800000;
width: 230px;
}
Use the Bootstrap center-block class..
<div class="caption center-block">Test</div>
http://codeply.com/go/UD1wOD7iLW
Some times what you would need is Bootstrap text-center class:
<div class="caption text-center">Text here</div>
Just add margin-left: auto; margin-right: auto; to the caption like you have on the image.
.size {
height: 230px;
width: 230px;
display: block;
margin-left: auto;
margin-right: auto;
border:5px solid #800000;
}
.caption {
font-size: 20px;
color: white;
text-align: center;
background-color: #800000;
width: 230px;
margin-left: auto;
margin-right: auto;
}
<div class="container">
<div class="row">
<div class="col-md-4 border"><img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg">
<div class="caption">Test</div>
</div>
</div>
To make them both the same size you need to either add the same border that's on the image to the caption, or add box-sizing: border-box to the image.
Center a caption under an image in bootstrap column
versi minify
.size{height:auto;width:100%;display:block;margin-left:auto;margin-right:auto;border:5px solid maroon;box-sizing:border-box}.caption{font-size:20px;color:#fff;background-color:maroon;width:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center}.display-container{position:relative;height:230px;width:230px;//float:left;//display:block}
<div class="container"><div class="row"><div class="col-md-4 border display-container"> <img class="img-responsive size" src="http://i1121.photobucket.com/albums/l514/sterzarino/lightning.jpg" /> <div class="caption center-block">Test</div></div></div></div>
I'm struggling trying to align both vertically and horizontally what should be a CSS keyboard.
I believe I got horizontal aligning right (by specifying width and margin:auto) but I can't understand how to align that vertically.
HTML:
<body>
<div class="maindocu">
<div class="keyboard">
<div class="first_row">
<div class="key">Q</div>
<div class="key">W</div>
<div class="key">E</div>
<div class="key">R</div>
<div class="key">T</div>
<div class="key">Y</div>
<div class="key">U</div>
<div class="key">I</div>
<div class="key">O</div>
<div class="key">P</div>
</div>
<div class="second_row">
<div class="key">A</div>
<div class="key">S</div>
<div class="key">D</div>
<div class="key">F</div>
<div class="key">G</div>
<div class="key">H</div>
<div class="key">J</div>
<div class="key">K</div>
<div class="key">L</div>
</div>
<div class="third_row">
<div class="key">Z</div>
<div class="key">X</div>
<div class="key">C</div>
<div class="key">V</div>
<div class="key">B</div>
<div class="key">N</div>
<div class="key">M</div>
</div>
</div>
</div>
</body>
CSS:
a.maindocu{
min-height: 100%;
}
.keyboard{
display: block;
border-spacing: 5px;
margin: auto;
position: relative;
vertical-align: middle;
}
.first_row{
display: block;
margin: auto;
width: 550px;
}
.second_row{
display: block;
margin: auto;
width: 490px;
}
.third_row{
display: block;
margin: auto;
width: 440px;
}
.key{
display: table-cell;
width: 50px;
height: 50px;
border-spacing: 5px;
text-align: center;
vertical-align: middle;
font-family: "Verdana";
font-size: 100%;
color: #ffffff;
background: #000;
border: 5px solid #808080;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}
JSFiddle: http://jsfiddle.net/fb58bpgj/
I have already read a few tutorials and tips and tricks but I can't figure this out. Any advice?
Thanks in advance!
I have a div with width: 180px; and height: 180px;.
How can I center a fontawesome icon horizontally and vertically inside the container?
Note: i may also add text below the icon
<div style="width:180px; height:180px; float:left;">
<i class="fa fa-search fa-4x"></i>
</div>
should look something like this:
Try this:
.centered{
position:relative;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
.container{
width:100px;
height:100px;
}
On mobile.
You can do it like this
#search{
background: gray;
width:180px;
height:180px;
float:left;
line-height: 180px;
text-align: center;
vertical-align: bottom;
}
#search > p {
margin-top: -155px;
}
Working example http://jsfiddle.net/kasperFranz/h91p8w4e/3/ (using icon instead of fa in the example, but shouldn't affect the result.)
I'm probably too late here, but it's a common question, so here's a simple working idea, the interesting side of it is that it adapts to the container size:
span{
margin: auto;
top: 0;
bottom: 0;
left: 0;
right: 0;
position: absolute;
text-align: center;
width: 15px;
height: 15px;
display: block;
}
Asuming to my comment, here is a JSFIDDLE
Without setting relative or absolute
html
<div class="myDiv">
<div class="content_wrapper">
<!--i class="fa fa-search fa-4x">test</i-->
<i class="icon-search icon-4x"></i><br />
<span class="myText">Search</span>
</div>
</div>
css
.myDiv{
width: 180px;
height: 180px;
float: left;
background: #ccc;
text-align: center;
display: table;
}
.content_wrapper{
display: table-cell;
vertical-align: middle;
}
.myText{
font-weight: bold;
font-size: 20px;
}
CSS
/* This parent can be any width and height */
.block {
text-align: center;
background:#ccc;
margin-bottom:10px;
}
/* The ghost, nudged to maintain perfect centering */
.block:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -0.25em; /* Adjusts for spacing */
}
/* The element to be centered, can
also be of any width and height */
.centered {
display: inline-block;
vertical-align: middle;
width: 300px;
}
HTML
<div class="block" style="height: 300px;">
<div class="centered">
<h1>Some text</h1>
<p>p1</p>
</div>
</div>
<div class="block" style="height: 200px;">
<div class="centered">
<h1>Some text</h1>
<p>p2</p>
</div>
</div>
<div class="block" style="height: 600px;">
<div class="centered">
<h1>Some text</h1>
<p>p3</p>
</div>
</div>
DEMO
Update 1:
DEMO
I know it's a bit late and you probably already figured this out.
I was able to achieve what you were looking for by wrapping the icon and text in a div then adding padding to that.
See the attached pen.
http://codepen.io/ForTheJim/pen/YPxveR
<p data-height="268" data-theme-id="0" data-slug-hash="YPxveR" data-default-tab="result" data-user="ForTheJim" class='codepen'>See the Pen <a href='http://codepen.io/ForTheJim/pen/YPxveR/'>Centering Icon Question</a> by Jim (<a href='http://codepen.io/ForTheJim'>#ForTheJim</a>) on <a href='http://codepen.io'>CodePen</a>.</p>
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
Short way just add display: grid; place-items: center; to your div and your ready to go.
like this:
<div style="width:180px; height:180px; display: grid; place-items: center;">
<i class="las la-user-circle"></i>
</div>