Having an issue with alignment of image/text - html

Trying to align the image vertically, and the text centered according to image. The whole card is about 300px * 200px. I want the image to be on the left hand side with text on the right.
<div class="card center-block">
<div class="container">
<div class="row">
<div class="col-sm-6">
<div class="photo">
<img class="rounded" src="../im/3.jpg" width="130" height="130" style="min-height:50px;" />
}
</div>
</div>
<div class="col-sm-6" style="height: 250px; align-items:center">
<div class="content">
<h5 class="left-align"><strong>John Doe</strong></h5>
<p class="left-align">Software Developer</p>
</div>
</div>
</div>
</div>
CSS:
.card {
min-width: 350px;
max-width: 350px;
min-height: 200px;
max-height: 200px;
}
.photo {
padding-top: 35px;
margin-right: 10px;
display:inline-block;
height: 100%;
float: left;
}
.content{
height: 100%;
}


You can add a class to the row and use flexbox positioning. align-items: center on the row that holds the 2 columns, then also use flex on the .content element and create a flex column with justify-content: center
.card {
min-width: 350px;
max-width: 350px;
min-height: 200px;
max-height: 200px;
}
.photo {
margin-right: 10px;
display:inline-block;
height: 100%;
float: left;
}
.special-row {
display: flex;
align-items: center;
}
.special-row .content {
display: flex;
flex-direction: column;
justify-content: center;
height: 100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card center-block">
<div class="container"><div class="row special-row">
<div class="col-sm-6">
<div class="photo">
<img class="rounded" src="http://androidandme.com/wp-content/uploads/2015/12/Google-Now-on-Tap.jpg"width="130" height="130" style="min-height:50px;" />
</div>
</div>
<div class="col-sm-6 details" style="height: 250px; align-items:center">
<div class="content">
<h5 class="left-align"><strong>John Doe</strong></h5>
<p class="left-align">Software Developer</p>
</div>
</div>
</div>
</div>

Related

How to align cards horizontally with an equal top border, with CSS?

How to align display: inline-block cards horizontally with an equal top border, with CSS?
Why is there a unequal top boder for each card when you open the following snippet in Full page width?
I used a fixed height and width for each .card element so I expected that it would be aligned.
Note: I also tried with display: table-cell but then I lost the fact that it's fluid and that the cards auto-adapt to the browser width (I'd like to keep an automatic number of cards per row, fitting the browser width, without having a horizontal scrollbar).
#main { width: 100%; }
.cell { display: inline-block; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id="main">
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla</p>
</div>
</div>
</div>
</div>

#main { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, 320px); justify-content: center; }
.card { border: 1px solid black; margin: 3em; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id="main">
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla</p>
</div>
</div>
</div>
</div>

do you mean something around these lines ?
#main {
display: flex;
gap: 40px;
flex-wrap: wrap;
width: 100%;
}
.cell { display: inline-block; }
.card { border: 1px solid black; width: 15em; height: 30em; }
.card img { width: 15em; height: 20em; }
.container { padding: 2px 16px; height: 10em; width: 100%; box-sizing: border-box; }
<div id="main">
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla blablabla</p>
</div>
</div>
</div>
<div class="cell">
<div class="card">
<img src="">
<div class="container">
<h4><b>Abc</b></h4>
<p>blablabla</p>
</div>
</div>
</div>
</div>

You could add vertical-align: middle to your cell class.
.cell { display: inline-block; vertical-align: middle;}

Super easy with flex and grid altogether. Flex is good for self center and adjustment. Grid will help us for the whole page margins and alignment:
.container {
display: grid;
align-items: center;
justify-content: center;
height: 100%;
}
.card {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: lightblue;
padding: 20px;
text-align: center;
}
You can adjust the width and height of the card to fit your needs, and also modify the padding and text alignment as desired.
P.S: Also, if you demand scrollbars to work, don't use flexbox. Change it to grid:
.card {
display: flex;
}
Here is the coding block. Will be my first time so behold:)
.container {
display: grid;
align-items: center;
justify-content: center;
height: 100%;
}
.card {
display: grid;
flex-direction: column;
align-items: center;
justify-content: center;
width: 200px;
height: 200px;
background-color: lightblue;
padding: 20px;
text-align: center;
}
.topnav {
white-space: nowrap;
display: grid;
grid-auto-flow: column;
overflow-x: scroll;
width: 20rem;
}
.topnav a,
.topnav button {
float: left;
display: block;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
<div class="container">
<div class="twitter-card">
<p>Here is the card</p>
<textarea cols="40" rows="10" ></textarea>
<div class="topnav">
<button>BIST </button>
<button>BIST Fav</button>
<button>EMTIA </button>
<button>Other</button>
<button>Other</button>
<button>Other </button>
<button>Other </button>
</div>
</div>
</div>

How to Justify a Image Grid?

I want all the rows to be of the same width and the images to occupy the full width of the row. Images can be fit to cover the dimensions. I have attached the code pen: https://codepen.io/shridhar_ke/pen/gOvpZOB
.header {
text-align: center;
padding: 32px;
}
.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 150px;
width: 100%;
margin-top: 8px;
text-align: justify;
}
.row img {
margin-left: 8px;
horizontal-align: middle;
height: 100%;
object-fit: cover;
width:auto;
}
<div class="container">
<div class="row">
<img src="https://via.placeholder.com/150x100.png" style="height:100%">
<img src="https://via.placeholder.com/160x200.png">
<img src="https://via.placeholder.com/200x200.png" style="height:100%">
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" style="height:100%">
<img src="https://via.placeholder.com/300x200.png" style="height:100%">
<img src="https://via.placeholder.com/400x200.png" style="height:100%">
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" style="height:100%">
<img src="https://via.placeholder.com/320x200.png" style="height:100%">
<img src="https://via.placeholder.com/240x180.png" style="height:100%">
</div>
</div>

I think it's possible with pure CSS. The key here is using the flex property.
Using the flex property
By setting flex: 1 1 auto; to the images, they're allowed to grow or shrink in order to fill up the entire row.
The only 'problem' here is that when the viewport gets too small, some rows will start shrinking and others won't. This is due to the fact that the height of your rows is hard coded to 150px. This is demonstrated by the code below:
.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 150px;
width: 100%;
margin-top: 8px;
/* Can be left out:
text-align: justify; */
}
.row img {
margin-left: 8px;
/* This property doesn't exist:
horizontal-align: middle; */
height: 100%;
object-fit: cover;
/* Can be left out:
width: auto; */
flex: 1 1 auto; /* Added this property */
}
<div class="container">
<div class="row">
<img src="https://via.placeholder.com/150x100.png" />
<img src="https://via.placeholder.com/160x200.png" />
<img src="https://via.placeholder.com/200x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" />
<img src="https://via.placeholder.com/300x200.png" />
<img src="https://via.placeholder.com/400x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" />
<img src="https://via.placeholder.com/320x200.png" />
<img src="https://via.placeholder.com/240x180.png" />
</div>
</div>
Adding responsive units to the mix
This problem can be fixed by changing the height of the rows using a responsive unit, like vw (viewport width), like I did in the final version below:
.container {
width: 90%;
display: flex;
flex-direction: column;
margin-left: auto;
margin-right: auto;
}
.row {
display: flex;
padding: 0 4px;
height: 15vw; /* Changed this property */
width: 100%;
margin-top: 8px;
}
.row img {
margin-left: 8px;
height: 100%;
object-fit: cover;
flex: 1 1 auto; /* Added this property */
}
<div class="container">
<div class="row">
<img src="https://via.placeholder.com/150x100.png" />
<img src="https://via.placeholder.com/160x200.png" />
<img src="https://via.placeholder.com/200x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/180x240.png" />
<img src="https://via.placeholder.com/300x200.png" />
<img src="https://via.placeholder.com/400x200.png" />
</div>
<div class="row">
<img src="https://via.placeholder.com/250x300.png" />
<img src="https://via.placeholder.com/320x200.png" />
<img src="https://via.placeholder.com/240x180.png" />
</div>
</div>

Vertical "space-between" distribution of images without flexbox

I have several columns of images of different sizes. As the sizes are unknown, one column will be the tallest. I now want to stretch out the other (smaller) columns to match that height by increasing the gaps between the images accordingly. Here is an example image:
And here is a jsfiddle of this example that I set up with flexbox.
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
However in my specific case, I cannot use flexbox (as I need to absolute position some children), so I am now looking for a way to achieve the same thing without flexbox. Is there any way to get this vertical "space-between" distribution without flexbox?

Based on the comment regarding absolute positioning:
I have tried to get the absolute positioning to work without any success. Basically I am trying to place captions underneath each images, however this captions should not be part of the flow, so the gaps should keep the same with as if there were no captions. When I tried to place the captions underneath, I ended up with all captions on the bottom of the entire column.
The solution is to rust wrap the images and captions in a div (or better still a figure) and give that position relative...then position your captions absolutely.
Like so:
#main {
max-width: 80%;
margin: auto;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.holder {
position: relative;
}
.column img {
display: block;
max-width: 100%;
height: auto;
}
.caption {
position: absolute;
bottom: 0;
text-align: center;
background: rgba(255, 255, 255, 0.5);
width: 100%;
}
<div id="main">
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/300">
</div>
<div class="holder"> <img src="http://placekitten.com/200/300"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/400">
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/200">
<div class="caption">My Caption</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/280"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/250">
<div class="caption">My Caption</div>
</div>
</div>
<div class="column">
<div class="holder">
<img src="http://placekitten.com/g/200/400">
<div class="caption">Superduper long Caption In Here</div>
</div>
<div class="holder"> <img src="http://placekitten.com/200/220"></div>
<div class="holder">
<img src="http://placekitten.com/g/200/260">
</div>
</div>
</div>

fix image height and use "object-fit:cover;"
#main {
width: 50%;
display: flex;
justify-content: space-between;
}
.column {
background-color: lightpink;
margin-right: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.column:last-child {
margin-right: 0;
}
.column img {
width: 100%;
align-self: center;
height:100px;
object-fit: cover;
}
<div id="main">
<div class="column">
<img src="http://placekitten.com/g/200/300">
<img src="http://placekitten.com/200/300">
<img src="http://placekitten.com/g/200/400">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/200">
<img src="http://placekitten.com/200/280">
<img src="http://placekitten.com/g/200/250">
</div>
<div class="column">
<img src="http://placekitten.com/g/200/400">
<img src="http://placekitten.com/200/220">
<img src="http://placekitten.com/g/200/260">
</div>
</div>

Trouble centering divs within a row in brackets

I'm trying to center 4 columns inside a a row. Trying in code pen or similar works like I want, but in adobe-brackets is not working, I don't know if there is a bug or something...
Does anyone has any idea?
PD.: in my brackets output, everything is on the left.
body {
position: relative;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
}
.content {
padding: 100px 0;
}
.content-2 {
color: violet;
background-color: blueviolet;
}
div.img {
margin: 5px;
float: center;
width: 180px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.row-centered {
text-align: center;
}
.col-centered {
display: inline-block;
float: none;
margin-right: 0 auto;
width: 90%;
}
<section class="content content-2">
<div class="container">
<div class="row row-centered">
<div class="img col-md-2 col-centered">
<img src="forest.jpg" alt="Forest">
<div class="desc">
<h3>CREATIVIDAD</h3>
<p>hhhhhhhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="forest.jpg" alt="Forest">
<div class="desc">
<h3>DISEÑO</h3>
<p>hhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="forest.jpg" alt="Forest">
<div class="desc">
<h3>MULTIMEDIA</h3>
<p>hhhhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="forest.jpg" alt="Forest">
<div class="desc">
<h3>WEB</h3>
<p>hhhhhhhhhhh</p>
</div>
</div>
</div>
</div>
</section>

Use CSS Flexbox. Apply flexbox properties to .row-centered as well as .col-centered:
.row-centered {
display: flex; /* Flex Container */
flex-wrap: wrap; /* Wrap the content to next line if required */
justify-content: center; /* Horizontally content to center */
align-items: center;
}
.col-centered {
display: flex; /* Flex Container */
flex-direction: column; /* Flex Direction - Column */
justify-content: center; /* Vertically Center Alignment */
float: none;
margin-right: 0 auto;
width: 90%;
}
Have a look at this snippet below (use full screen):
body {
position: relative;
}
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.container-fluid {
width: inherit;
height: inherit;
margin: 0;
padding: 0;
}
.content {
padding: 100px 0;
}
.content-2 {
color: violet;
background-color: blueviolet;
}
div.img {
margin: 5px;
float: center;
width: 180px;
}
div.img img {
width: 100%;
height: auto;
}
div.desc {
padding: 15px;
text-align: center;
}
.row-centered {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.col-centered {
display: flex;
flex-direction: column;
justify-content: center;
float: none;
margin-right: 0 auto;
width: 90%;
}
<section class="content content-2">
<div class="container">
<div class="row row-centered">
<div class="img col-md-2 col-centered">
<img src="http://placehold.it/30x30" alt="Forest">
<div class="desc">
<h3>CREATIVIDAD</h3>
<p>hhhhhhhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="http://placehold.it/30x30" alt="Forest">
<div class="desc">
<h3>DISEÑO</h3>
<p>hhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="http://placehold.it/30x30" alt="Forest">
<div class="desc">
<h3>MULTIMEDIA</h3>
<p>hhhhhhhhhhhhh</p>
</div>
</div>
<div class="img col-md-2 col-centered">
<img src="http://placehold.it/30x30" alt="Forest">
<div class="desc">
<h3>WEB</h3>
<p>hhhhhhhhhhh</p>
</div>
</div>
</div>
</div>
</section>
Hope this helps!

Why I can't center the components horizontally in the div?

I have block and inside the blocks, there are three boxes. The CSS is
.blocks {
display: block;
margin: 0 auto;
width: 60%;
height: 350px;
}
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
}
In the box, there is an image and a text. I want them centered horizontally.
So I did as
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
margin-left: auto;
margin-right: auto;
}
But they are not centered. As shown in the image.
My HTML is
<div class="blocks">
<div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;">
<!-- One image and text here -->
</div>
<div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;">
<!-- One image and text here -->
</div>
<div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;">
<!-- One image and text here -->
</div>
</div>
How to center the components horizontally in the div?

Just give text-align: center; to all the three box.
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
text-align: center;
}
Working Fiddle

To center the text, you could use
text-align: center;
To center the images, you need to put a margin on them
.blocks img {
margin: 0 auto;
}

give the imgs a width: 100% and center the text
.blocks {
display: block;
margin: 0 auto;
width: 60%;
height: 350px;
}
.box1,
.box2,
.box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
}
.box1,
.box2,
.box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
margin-left: auto;
margin-right: auto;
}
img{
width: 100%;
}
h5{
text-align: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="blocks">
<div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;">
<!-- One image and text here -->
<img src="http://i.imgur.com/IMiabf0.jpg" alt="" />
<h5>This is Cute Cat</h5>
</div>
<div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;">
<!-- One image and text here -->
<img src="http://i.imgur.com/IMiabf0.jpg" alt="" />
<h5>This is Cute Cat</h5>
</div>
<div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;">
<!-- One image and text here -->
<img src="http://i.imgur.com/IMiabf0.jpg" alt="" />
<h5>This is Cute Cat</h5>
</div>
</div>

The logic to centre align the container is fine, but there are some spacing between those components. hence, all components doesn't fit in blocks.
Adding float:left; to each box will fix the issue.
.blocks {
display: block;
margin: 0 auto;
width: 60%;
height: 350px;
}
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
float: left;
}
<div class="blocks">
<div class="col-sm-4 col-xs-4 box1" style="background-color:lavender;">
<img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;">
</div>
<div class="col-sm-4 col-xs-4 box2" style="background-color:lavenderblush;">
<img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;">
</div>
<div class="col-sm-4 col-xs-4 box3" style="background-color:lavender;">
<img src="pic_mountain.jpg" alt="Mountain View" style="width:100px;height:100px;">
</div>
</div>