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>
Related
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
I am using angular-material and materializecss. I'm not really strong with css but i tried to play with it and not much of results ...
I am trying to inline the avatar with the text so far i tried to use span with class to try style the text together with img but no success..
Best result i got so far is , text after avatar but slightly below avatar.
my HTML and custom css.
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" ng-src="{{image.user.profile_picture}}">{{image.user.username}}
</div>
</md-card>
</div>
</div>
Use this:
.img-info img.circle{
vertical-align: middle;
}
And next time, share rendered HTML, the html you was shared is not useful.
snippet:
.img-info img.circle{
vertical-align: middle;
}
.gallery{
margin-bottom: 10px;
}
.responsive-img{
width: 100%;
}
.img-info{
text-align: center;
background: #b3e5fc;
color: black;
width: 100%;
margin-bottom: 10px;
padding: 10px 0;
}
.circle{
width: 60;
margin: 10px 5%;
}
.black-text{
text-align: center;
}
.circle .black-text{
display: inline;
}
<div class="row gallery">
<div class="col l3 col m4 col s12" ng-repeat="image in images">
<md-card class="z-depth-3">
<!--INSTAGRAM PHOTOS-->
<a>
<img class="responsive-img" ng-src="{{image.images.standard_resolution.url}}" alt="">
</a>
<!--USER AND AVATAR-->
<div class="img-info">
<img class="circle" src="http://dummyimage.com/50x50/000655/fff"> The text
</div>
</md-card>
</div>
</div>
Trying to center a bootstrap row and it's contents inside a div. The code is below:
HTML:
<div class="horizontal-layout">
<div class="row">
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_coversheet_blue.png" style="height:100px; width:100px; cursor:pointer;">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_onepager_pink.png" style="height:100px; width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_user_profile_green.png" style="height:100px;width:100px;cursor:pointer ">
<h4>Add</h4>
</div>
</div>
<div class="col-md-3">
<div class="packet-icon">
<img src="~/Content/Images/Icons/ic_create_packet.png" style="height:100px; width:100px;cursor:pointer">
<h4>View</h4>
</div>
</div>
</div>
CSS:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
}
.packet-icon {
text-align: center;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
min-height: 140px;
min-width: 140px;
}
RESULT:
But When I go and make changes to parent div(horizontal-layout) be displayed flex and the child div to align-middle, my width of row changes.
After Css Change:
.horizontal-layout {
/*background-color: blue;*/
min-height: 700px;
border: 1px solid;
border-radius: 5px;
border-color: #F26631;
padding: 30px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.horizontal-layout > div {
display: inline-block;
vertical-align: middle;
}
OUTPUT:
Can anyone fix the row with issue?
By default, div was display: block, so that the width was automatically 100%.
Specifying .horizontal-layout > div to display: inline-block changed that behavior, so if you want to keep that, you have to set width manually:
.horizontal-layout > div {
...
width: 100%;
}
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>