I have the following html block (image is just something I found on the web). I've used multiple examples and answers from different questions tackling the similar problem I have but I can't seem to figure it out.
What's the proper or best way to align a text vertically beside an image? I'm currently using bootstrap 3.3.6. I tried using different approaches but can't seem to make anything work.
.textContainer {
display: table;
}
.imageClass {
margin: 5px;
}
.spanText {
display: table-cell;
align-items: middle;
}
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" width=100 height=100 src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text" />
<span class="spanText">Need to center</span>
</div>
</div>
</div>
You can simply remove your display: table; CSS, and use bootstrap's default img { vertical-align: middle; } CSS to align the text vertically.
.imageClass {
margin: 5px;
width: 100px;
height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text">
<span class="spanText">Need to center</span>
</div>
</div>
</div>
You can also use display: flex; on the parent with align-items: center; to align the flex children vertically.
.textContainer {
display: flex;
align-items: center;
}
.imageClass {
margin: 5px;
width: 100px;
height: 100px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
<div class="row">
<div class="col-md-6 textContainer">
<img class="imageClass" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Wiktionary_small.svg" alt="alt text">
<span class="spanText">Need to center</span>
</div>
</div>
</div>
Related
I'm trying to simulate a shelf of books so that they look like this:
photoshop_mock_up
I can get the books to align just fine, but can't figure out how to make them retain their odd heights/widths, and not all just resize to the container:
HTML:
<div class="images-outer">
<div class="image-inner">
<img src="img/_0002_aristotle__poetics_and_rhetoric.png">
</div>
<div class="image-inner">
<img src="img/_0005_david_mamet__make_believe_town.png">
</div>
<div class="image-inner">
<img src="img/_0003_david_mamet__bambi_vs_godzilla.png">
</div>
<div class="image-inner">
<img src="img/_0006_annie_dillard__pilgrim_at_tinker_creek.png ">
</div>
</div>
CSS:
.images-outer {
height: 50%;
max-height: 50%;
display: flex;
vertical-align: bottom;
}
.image-inner img {
max-height: 100%;
}
img {
max-height: 100%;
}
This makes them look like this: web_page
Ideas?
In display: flex, you should use align-items to set vertical align and justify-content for horizontal align.
.images-outer {
height: 300px;
max-height: 50%;
display: flex;
align-items:flex-end;
justify-content:center;
background: black
}
.image-inner {
max-width:30px;
padding: 0px 5px;
}
.image-inner {
object-fit: contain;
object-position: bottom;
width: 100%;
}
<div class="images-outer">
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/240" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/180" />
</div>
<div class="image-inner">
<img src="https://picsum.photos/30/200" />
</div>
</div>
</div>
.image-inner img{
width:100%;
height:auto;}
This should help in sizing the images properly
Else, you could dive each image an individual class and give each it's individual height.
I have the following lines of HTML and CSS to align 3 images to the centre of the page.
HTML:
<div class="row2">
<div align="center;" class="icon">
<img src="image/character.png" />
</div>
<div align="center;" class="icon">
<img src="image/online.png" />
</div>
<div align="center;" class="icon">
<img src="image/leaderboard.png" />
</div>
</div>
CSS:
.row2 {
display: flex;
align-items: center;
justify-content: center;
}
.icon {
position: relative;
display: inline-block;
float: left;
padding: 100px;
}
I assumed if i added text under the images it would align itself under the image, however it appears beside the image. how would i get the text to show up underneath?
Just put the text inside a <div>, which is a block element and will wrap below the image.
.row2 {
display: flex;
align-items: center;
justify-content: center;
}
.icon {
position: relative;
display: inline-block;
float: left;
padding: 50px;
}
.icon__text {
color: dodgerblue;
font-weight: bold;
text-align: center;
}
<div class="row2">
<div align="center;" class="icon">
<img src="https://picsum.photos/100" />
<div class="icon__text">Text 1</div>
</div>
<div align="center;" class="icon">
<img src="https://picsum.photos/100" />
<div class="icon__text">Text 2</div>
</div>
<div align="center;" class="icon">
<img src="https://picsum.photos/100" />
<div class="icon__text">Text 3</div>
</div>
</div>
Remove the float: left; from .icon – it contradicts the centering anyway.
Or, if you inist on that for some reason, add clear: both to the tag into which your text is wrapped (probably a <p> tag, but you didn't describe that). This will put the text under any floated element above it.
I am using css and bootstrap to develop a website and using verticle-align:middle; is not working how it should, but on research of this topic I found a solution to vertical align items but it may not work in older browsers.
This is what I found that work centering images in the columns that they are in.
.logo-container{
height: 100%;
display: flex;
align-items : center;
.logo{
}
}
}
This is what I tried using but could not get it to work.
section#providers{
.logo-container{
height: 100%;
display: table;
.logo{
width: 100%;
display: table-cell;
vertical-align: middle !important;
}
}
}
This is the HTML
<section id="providers">
<div class="container">
<div class="row" id="logos">
<div class="col-2">
<div class="logo-container">
<div class="logo">
<img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/uh.png" class="img-fluid">
</div>
</div>
</div>
<div class="col-2">
<div class="logo-container">
<div class="logo">
<img src="<?php bloginfo('template_directory'); ?>/images/insurance_logos/test1.png" class="img-fluid">
</div>
</div>
</div>
</div>
</div>
</section>
From what I researched all you need to do is set the parent to display as a table, and then the child is displayed as a table cell and you set vertical algin to middle. What am I missing from the picture?
The parent div is missing position:relative;
section#providers{
.logo-container{
position: relative;
height: 100%;
//display: flex;
//align-items : center;
display: table;
.logo{
width: 100%;
display: table-cell;
vertical-align: middle !important;
}
}
}
I have the following HTML structure currently:
<div id="image" style="margin: 20px;">
<h5>
<span>DriverName1</span>
<span>DriverName2</span>
</h5>
<img src=/>
<img src= />
</div>
I am trying to make the images appear side by side which they are doing, but the headers for drivername1 and drivername2 are appearing right next to each other over the same image. How do I make these spans match up with the top left edge of each image? I tried adding separate headers over each image but that makes the images go vertically one on top of the other then.
you can consider using display:flex for this
check the following snippet
div{
display:flex;
}
.image {
display: flex;
flex-direction: column;
border:1px solid;
margin-left:10px;
}
img {
width: 100px;
height: 100px;
}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Non-flex solution
div * {
display: inline-block;
}
.image {
border: 1px solid;
margin-left: 10px;
}
img {
width: 100px;
height: 100px;
display: table-cell;
}
header {}
<div id="image" style="margin: 20px;">
<section class="image">
<header>DriverName1</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg">
</section>
<section class="image">
<header>DriverName2</header>
<img src="http://blog.caranddriver.com/wp-content/uploads/2015/11/BMW-2-series.jpg" width=25px height=25px>
</section>
</div>
Hope this helps
I have this code, which aligns two images to left and right side of the page with space between:
.center {
width: 100%;
display: table;
}
.leftk {
display: table-cell;
}
.rightk {
display: table-cell;
text-align: right;
vertical-align: middle;
}
<div class="center">
<div class="leftk">
<img src="http://loremflickr.com/300/200" />
</div>
<div class="rightk">
<img src="http://loremflickr.com/400/100" />
</div>
</div>
<span>Text</span>
I tried to do the same with inline-block, but I am unable to align vertically right image to center. Can you please show me a quick example to how to get same result with inline-block?
Edit: If page size is smaller than image width, I want to display them under each other.
Here is how you do it with inline block:
jsFiddle
.center {
font-size: 0; /*remove white space*/
text-align: justify;
}
.center:after {
content: "";
display: inline-block;
width: 100%;
}
.leftk,
.rightk {
font-size: 16px;
display: inline-block;
vertical-align: middle;
}
<div class="center">
<div class="leftk">
<img src="//dummyimage.com/200x200" />
</div>
<div class="rightk">
<img src="//dummyimage.com/100x100" />
</div>
</div>
you can use css3 flexbox instead,
use display:flex instead of display:table
add justify-content:space-between;
it's works fine.
.center {
width: 100%;
display: flex;
justify-content:space-between;
align-items:center;
}
.leftk>img {
width:100px;
height:100px;
}
.rightk>img {
width:50px;
height:50px;
}
<div class="center">
<div class="leftk" style="display: table-cell;">
<img src="https://i.stack.imgur.com/wwy2w.jpg"/>
</div>
<div class="rightk">
<img src="https://i.stack.imgur.com/wwy2w.jpg"/>
</div>
</div>
<span>Text</span>