I'd like media-body content to be vertically aligned 'middle'.
Here is the markup:
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="..." alt="...">
</a>
<div class="media-body">
I'd like this text to be vertically aligned 'middle'
</div>
</div>
I've tried the following which doesn't work:
.media-body {
vertical-align: middle;
}
Any idea how I can do this?
Since Bootstrap v3.3.0, it's possible to vertically align both the media-object and the media-body, by adding the CSS class media-middle.
For example:
<div class="media">
<div class="media-left media-middle">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body media-middle">
<h4 class="media-heading">Media heading</h4>
...
</div>
</div>
See: http://getbootstrap.com/components/#media
Incidentally, the docs currently don't make it clear that this works for the media-body as well. It does, because all media-middle does is to add a vertical-align: middle; style to an element, and media-body already has the style display: table-cell (as does media-left and media-right).
Bootply : http://www.bootply.com/122430
HTML:
<div class="media">
<a class="" href="#">
<img class="media-object custom-media" src="..." alt="..." height="500px" width="500px">
</a>
<div class="media-body">
I'd like this text to be vertically aligned 'middle'
</div>
</div>
CSS:
.custom-media, .media-body{
display:inline;
}
Trying adding this bootstrap classes
class="text-center"
class="pagination-centered"
Related
I want to use css, bootstrap to align the first line align left, and the second line will center on the text length of the first line.
I tried many ways but not.
code follow
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<div class="col-md-2" style="padding:0">
<img src="/Content/images/logo.png" class="img-responsive" alt="">
</div>
<div class="col-md-10 tex-center" style="padding-right:0;">
<div style="padding:0">
<div class="line1-bold">THIS IS THE FIRST LONG HEADLINE</div>
<div class="line2">THIS IS THE SECOND HEADLINE</div>
</div>
</div>
</div>
</a>
</div>
Please check this..
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<div class="col-xs-2" style="padding:0">
<img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" style="width:100px" alt="">
</div>
<div class="" style="float:left;">
<div class="line1-bold" style="color:#b63957; font-size:18px;">THIS IS THE FIRST LONG HEADLINE</div>
<div class="line2" style="color:#b63957; font-size:16px; text-align:center;">THIS IS THE SECOND HEADLINE</div>
</div>
</div>
</a>
</div>
Try adding the class text-center to your divs.
Here is a working pen.
Something like this?
I don't know about your task, but I deleted some tags.
CSS
.img-responsive {
width: 100px;
float: left;
}
span {
display: block;
}
HTML
<div class="col-md-6">
<a href="/" style="text-decoration:none">
<div class="col-md-12 row-eq-height" style="padding:0;">
<img src="https://www.tenforums.com/attachments/browsers-email/18558d1485951187t-microsoft-edge-logo-microsoft-edge-100582336-large.png" class="img-responsive" alt="">
<span class="text-left">THIS IS THE FIRST LONG HEADLINE</span>
<span class="text-center">THIS IS THE SECOND HEADLINE</span>
</div>
</a>
</div>
Reference Link
How can position a picture of 30px width and 30px height with 2 lines next to it so these two lines would fit one above the other also within 30px height?
I already have Bootstrap installed if it could help.
<p>
<img src='pic1.png' width='30' height='30'/> <a href='#'>E"nola Kuhic (wiu)</a>
person
</p>
Consider using Bootstrap's media object.
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object" src="..." alt="...">
</a>
</div>
<div class="media-body">
E"nola Kuhic (wiu)
person
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="media">
<div class="media-left">
<img class="media-object" src="https://placehold.it/40x40">
</div>
<div class="media-body">
E"nola Kuhic (wiu)
<div>person</div>
</div>
</div>
<div class="media">
<div class="media-left">
<img class="media-object" src="https://placehold.it/40/AFA">
</div>
<div class="media-body">
John Doe
<div>admin</div>
</div>
</div>
<p>
<img src='pic1.png' width='30' height='30' style='float:left;'/>
<a href='#'>E"nola Kuhic (wiu)</a><br />
person
</p>
I want to use the media bottom bootstrap component but the text is top aligned despite adding the media-bottom class. Is this component broken or something. Any clean workaround?
Thanks
fiddle: https://jsfiddle.net/2yrrf6zx/2/
HTML code:
<div class="media">
<div class="media-left media-bottom">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
You are putting the media-bottom on the image and not on the text. If you use the following HTML, it should work as expected:
<div class="media">
<div class="media-left">
<a href="#">
<img class="media-object pull-left" src="https://upload.wikimedia.org/wikipedia/commons/1/16/HDRI_Sample_Scene_Balls_%28JPEG-HDR%29.jpg">
</a>
</div>
<div class="media-body media-bottom">
<p>Title</p>
<h4 class="media-heading">text</h4>
</div>
</div>
Fiddle
I'm using a template with Bootstrap.
The following code:
<div class="row mix-grid thumbnails wrapper white" id="pictures_placeholder">
<div class="col-md-3 col-sm-4 mix ">
<div class="mix-inner">
<img class="img-responsive" src="../../../assets/admin/pages/media/works/img1.jpg"
alt="">
<div class="mix-details picture-bottom-label">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="col-md-4 col-xs-3">
<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
class="img-responsive img-circle profile-pic"
alt=""
/>
</div>
<div class="col-md-8 col-xs-8 text-left user-name">Asaf Nevo</div>
</div>
</div>
</div>
</div>
</div>
</div>
does this:
How can I make the name (Asaf Nevo) to be entered to the image ?
try adding this to CSS:
div.user-name{height:92px;line-height:92px;}
hope that helps.
Put the name in the same div as the image. Make both inline.
<img src="../../../assets/admin/pages/media/profile/profile_user.jpg"
class="img-responsive img-circle profile-pic" alt="" />Asav Nevo
Now play with the CSS property vertical-align. Something like vertical-align: middle could work and yes, this property should be applied to the surrounding div if not mistaken, potentially also to the inline content itself. I cannot try it right now.
Add this to the css:
.user-name {
margin-top:50%;
}
I have three images on my site that are not equally spaced apart.
I would like to space these three items evenly across the page.
I have tried adding them into a container and applying different span classes to them but with no joy.
What is the best way to solve this without causing problems elsewhere? (e.g. on smaller devices).
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-5 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-8 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
The images are not equally spaced because you have provided inappropriate column classes for second and third div's.
Use col-4 for second(instead of col-5) and col-7 for third(instead of col-8) div.
<div class="col-1 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</div>
<div class="col-4 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a>
</div>
<div class="col-7 row-5 sizex-3 sizey-3">
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a>
</div>
You might aswell want to provide extra padding to each div for small resolutions.
Additionally, as haxxxton mentioned in comments, you should rather stick to standard bootstarp-3 classes for better usability.
Cheers!
You may like the reactive behaviour of a flex based solution like in this JSFiddle:
http://jsfiddle.net/6tknc03s/
.container {
display:flex;
justify-content:space-around;
flex-wrap:nowrap;
}
.container img {
width:100%;
}
I've tested this solution in Chrome, compatibility in FF and iOS requires vendor specific prefixes to be added to the CSS I've used.
Your best bet is to put them in col-*-4 (I chose sm, but whatever works best for you) and make sure to add class="img-responsive" to the img element, like so:
<div class="container">
<div class="row">
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive">
</div>
<div class="col-sm-4">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive">
</div>
</div>
</div>
Example: http://www.bootply.com/4lmpKkgENa
Try this out. it works i have edited your code with adding style to it.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
li {
display:inline;
list-style:none;
}
</style>
</head>
<body>
<div class="col-1 row-5 sizex-3 sizey-3">
<ul>
<li> <a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=HCV">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/HCV.png" class="img-responsive" />
</a>
</li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TSZ">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TSZ.png" class="img-responsive" />
</a></li>
<li>
<a href="http://data.vicforeststrp.opendata.arcgis.com/datasets?q=TRP">
<img src="https://dl.dropboxusercontent.com/u/11426532/VicForest/TRP.png" class="img-responsive" />
</a></li>
</ul>
</div>
</body>
</html>
Try this out:
<div class="row>
<div class-"container">
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
<div class="col-lg-4">
<img src="">
</div>
</div>
</div>