This question already has answers here:
How to vertically align text inside a flexbox?
(13 answers)
Closed 4 years ago.
I am working on a fiddle in which I want to vertically align James text in html/css as shown below in the image. The HTML code which I have used for that is:
<div class="tab-pane" id="reviews" style="display: block;">
<p>
<span class="heading_size">reviews:</span>
</p>
<p class="text-justify mb-0 mb-1">
</p>
<div class="review">
<div class="mb-2 renter_review">
<div class="renter_rating_image">
<img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<p style="text-align:center;font-style:italic;margin-bottom:0%;">this bobcat was amazing</p>
<span>10.22,07, 04, 18</span>
</div>
<div class="renter_review_firstname">James</div>
</div>
<div class="review">
<div class="mb-2 renter_review">
<div class="renter_rating_image">
<img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<p style="text-align:center;font-style:italic;margin-bottom:0%;">it was perfect!</p>
<span>10.14,01, 17, 18</span>
</div>
<div class="renter_review_firstname">James</div>
</div>
<p></p>
</div>
In the fiddle, the text James is not properly aligned. I am wondering what changes I need to do in the HTML/CSS code so that the text James is aligned vertically properly.
I have a feeling width of this bobcat was amazing and it was perfect text is making James text not properly aligned vertically.
Problem Statement:
I am wondering what changes I need to do HTML/CSS code so that James text is properly vertically aligned.
At this moment, as shown in the image below, the upper James text is quite right in comparison to the lower James text.
You can use this solution, or another now we have a GRID also.
This solution, is to wrapping the content of your container with review class, and use flexbox for what you want.
.wrapper-review {
display: flex;
flex-flow: row wrap;
}
<div class="tab-pane" id="reviews" style="display: block;">
<p>
<span class="heading_size">reviews:</span>
</p>
<p class="text-justify mb-0 mb-1">
</p>
<div class="wrapper-review">
<div class="review">
<div class="mb-2 renter_review">
<div class="renter_rating_image">
<img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<p style="text-align:center;font-style:italic;margin-bottom:0%;">this bobcat was amazing</p>
<span>10.22,07, 04, 18</span>
</div>
<div class="renter_review_firstname">James</div>
</div>
<div class="review">
<div class="mb-2 renter_review">
<div class="renter_rating_image">
<img class="item_review_image" src="https://i.imgur.com/lbDo4tM.jpg">
</div>
<p style="text-align:center;font-style:italic;margin-bottom:0%;">it was perfect!</p>
<span>10.14,01, 17, 18</span>
</div>
<div class="renter_review_firstname">James</div>
</div>
</div>
<p></p>
</div>
Trying adding the following to your css
p {
width: min-content;
}
But you should try using a grid system like http://getbootstrap.com. It helps a ton! :)
Related
how do I align all buttons at the bottom of the card? The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto' however the it's still not being positioned at the bottom?
I attached below the code structure for my cards including the styling for the card content and the buttons.
[](https://i.stack.imgur.com/eJLHT.png)
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<button class="card-btn card-btn-2">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-3"></div>
<div class="card-content">
<h2 class="card-header">Free PPEs for HCWs</h2>
<p class="card-text">Vice President Leni Robredo’s office continues its livelihood assistance projects as it turned over materials to a group of Bulacan sewers, who were tapped to make personal protective equipment (PPEs) who were tapped to make personal protective equipment (PPEs). </p>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
BACK TO TOP
</section>
`
The body of the card is already on display:flex and flex-direction: column, while the card buttons' margin-top are already set at 'auto'. I can fix this by manually adjusting the button's margin but I think it's possible to adjust all buttons simultaneously.
I prepared a example in codepen:
https://codepen.io/isaksonn/pen/eYKzarW
section.container .card{display:flex;flex-direction:column;justify-content:space-between;height:600px;width:200px;border:1px solid gray;padding:10px}section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}section.container .card .card-content{height:100%;display:flex;flex-direction:column;justify-content:space-between}
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
<div class="divAdded">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
</div>
<button class="card-btn">Read more<span>→</span></button>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<button class="card-btn card-btn-2">Read more<span>→</span></button>
</div>
</div>
BACK TO TOP
</section>
section.container .card{height:600px;width:200px;border:1px solid gray;padding:10px}
section.container .card .card-img{display:block;background-color:gray;width:100%;height:200px}
.btn{
text-align: center;
margin: 10px 0;
}
<section class="container">
<div class="card">
<div class="card-img card-1"></div>
<div class="card-content">
<!--If you want align the title and text on the top and only the buttons down you have to wrap the firsts in a div, otherwise the text is centered vertically (as second card)-->
<div class="divAdded">
<h2 class="card-header">Bayanihan E-Konsulta</h2>
<p class="card-text">The Bayanihan e-Konsulta – a teleconsultation program aimed at assisting both COVID-19 and non-COVID-19 patients which was initially launched to fill the gaps in the government’s pandemic response.</p>
</div>
<p class="btn"><button class="card-btn">Read more<span>→</span></button></p>
</div>
</div>
<div class="card">
<div class="card-img card-2"></div>
<div class="card-content">
<h2 class="card-header">Swab Cab</h2>
<p class="card-text">A mobile testing program which will do mass surveillance testing in communities where transmission is very high.</p>
<p class="btn"><button class="card-btn card-btn-2">Read more<span>→</span></button></p>
</div>
</div>
BACK TO TOP
</section>
You can try this..
add button element in 'p' and you can add class in 'p' element and than go to css file and style
I have a row of thumbnails like this:
I want them to be equal height though. This is my code:
<div class="row text-center">
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>Hotkey description goes here. Category only shown in explore.</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<div class="caption">
<h3>HOTKEY + COMBO</h3>
<p>short desc</p>
<p>
<a href="#" class="btn btn-default" data-tooltip="Change Hotkey">
</p>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6 hotkey-add">
<div class="thumbnail">
<div class="caption">
<p></p>
<p><span class="glyphicon glyphicon-plus"></span></p>
</div>
</div>
</div>
</div>
Is this possible? Like we see in bootstrap4 here is equal height cards:
http://www.codeply.com/render/KrUO8QpyXP#
I know I'm a little late on this, but I think the best way is flexbox. Here's how it would work in Bootstrap 3:
.row.display-flex {
display: flex;
flex-wrap: wrap;
}
.thumbnail {
height: 100%;
}
Just add display-flex to the containing row. Also, the upcoming Bootstrap 4 has flexbox as the default so this extra CSS won't be necessary in the future.
Thumbnails with flexbox
You can also do more with the position of child elements.
Also see,
make Bootstrap columns all the same height
It seems that bootstrap 4, like you show in the example, is using to get the same height, display: table for the container div and display: table-cell for the inner ones.
Other solution can be using <table> instead <div>, using flex property...
Checkout this How can I make Bootstrap columns all the same height?
How can I make 3 columns be dead centered?
They are spread out currently.
<div class="container container2">
<div class="row no-gutter">
<div class="col-md-4">
<h1>1</h1>
<p class="description1">elige<br>tu box</p>
<img class="crop-img" src="img/icono_elige.jpg" alt="delivery" />
<p class="description">elije entre la</br><b>box mensual</b> o la <b> </br> box personalizada</b></p>
</div>
<div class="col-md-4">
<h1>2</h1>
<p class="description1">elige<br>tus snacks</p>
<img class="crop-img" src="img/icono_snacks.jpg" alt="elige" />
<p class="description">encuentra mas de<br> <b>80 snacks</b> y<br>agregalos a tu box</p>
</div>
<div class="col-md-4">
<h1>3</h1>
<p class="description1">pide y<br>recibe</p>
<img class="crop-img" src="img/icono_delivery.png" alt=elige />
<p class="description">para ti, para<br> compartir o para<br>regalar</p>
</div>
</div>
http://imgur.com/a/UjOlV
Top - What I have
Bottom - What I need
Thanks for your help :)
All three boxes have the same width (some where around 33.3333%). I think you're using text-align: center; which will place the contents in the middle of the boxes. I think the best solution is making the middle box smaller.
You can also use col-push and col-pull.
To find more information about this, check http://getbootstrap.com/css/#grid-offsetting.
Just try using different sizes of columns and offsetting these.
#partypete25 and whoever else may be can help!
Thanks for:
Left aligned caption for center aligned responsive image
and
https://jsfiddle.net/mk7on98L/19/
It's working for me as well! However I cannot seem to have multiple lines of text underneath the image. I tried to use a BR and add more lines of text but that errors out. Any suggestions on multiple lines of text with a BR at the end of each line of text? Thanks!
I'm trying to use something like this:
<div class="container">
<div class="row">
<div class="col-xs-12">
<span class="text-center center-block" style="max-width:100%">
<span data-caption="line 1 of text <br> line 2 of text <br> line 3 of text" class="img-wrapper text-left">
<img class="img-responsive" src="http://placehold.it/350x150">
</span>
</span>
</div>
</div>
</div>
Regards,
For multiple lines, you'll need to specify a width on .img-wrapper
I think you were making this two hard on yourself. Just seperate the caption from the image.
<div class="container">
<div class="row">
<div class="col-xs-12">
<span style="width:100%; margin:0 auto;">
<img class="img-responsive" src="http://placehold.it/350x150">
</span>
<span class="caption">line 1 of text <br> line 2 of text <br> line 3 of text</span>
</div>
</div>
</div>
Ok so I have the following HTML
<div class="container">
<div class="row col-sm-12" id="productBrief">
<div id="RaspberryAndChocolate" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Rasberry_White_Chocolate_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Rasberry White Chocolate Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="raspberryRed productLineHeight">FLAVOUR #3</h2>
<h1 class="raspberryRed">
RASPBERRY &<br /> WHITE CHOCOLATE
</h1>
<p class="productPara">
A decadent combination of whole raspberries and smooth white chocolate that you will want to make last as long as possible. Teaspoon recommended.
</p>
<p>
<span class="label label-danone label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
<div id="BlueBerry" style="display:none; height:200px;">
<div class="col-sm-6 text-center">
<img src="~/Content/Images/YogurtImages_404x290/Blueberry_Yogurt.png" class="img-responsive" style="margin: 0 auto; padding-top: 5%" alt="Blueberry Yogurt" />
</div>
<div class="col-sm-6">
<h2 class="blueBerry productLineHeight">FLAVOUR #6</h2>
<h1 class="blueBerry">
BLUEBERRY
</h1>
<p class="productPara">
Just imagine plump and juicy blueberries immersed in a deliciously creamy yoghurt. Enough said.
</p>
<p>
<span class="label label-as-badge" style="font-size: 0.9em; padding:3%">VIEW ALL FLAVOURS</span>
</p>
</div>
</div>
<div class="clearfix"></div>
</div>
<div class="clearfix"></div>
<div class="row">
<div class="col-lg-12 text-center">
<div class="col-lg-2"></div>
<p style="width:70%;" class="text-center col-lg-8">
Experiencing Ultimate's uniquely luscious texture for the first time is beyond words. So don't even try. Take a moment to enjoy the ultra creaminess, the juicy ripened fruits and an array of wicked indulgences that come together to create a yoghurt like no other.
</p>
<div class="col-lg-2"></div>
</div>
</div>
Now there are roughly about 8 different divs but for simplicity I am only showing 2, but only one div is shown look at it as a random affect so the user refreshes the page a different div is shown (this is done in jquery) but if you look at the bottom of the HTML you will see another row with a P tag this is what is causing he issue, when displayed on a desktop it shows like this
when I minimize the browser the text at the bottom of the image displays under the text located to the right hand side of the yogurt box as shown here.
I have added the clearfix, tried adding a new container and yet the problem still remains....
You are using invalid bootstrap grid. Col should be a child of row. Use correct grid and everything will work perfectly.
Scott, hunzaboy says you need to use the dive like this
<div class="row">
<div class="col-sm-12"></div>
</div>
I don't fully understand your question, but hope you asking this,
when re-sizing your first image, I will suitably re-size without any harm to other divs. For that You need to devide that into 3 main divs, check the below code
<div class="row">
<div class="col-md-6">This is the image holding div</div><div class="col-md-6"> this is the right side text "Flavour #6, etc..."</div>
<div class="col-md-12">This is the text on the bottom</div>
</div>
I will look, 2 columns on the top and one column in the bottom.
For mobile view, you can use col-xs-12class, the it will show as stack.
Hope this is you asking. Thanks