This question already has answers here:
vertical-align with Bootstrap 3
(26 answers)
Bootstrap how to get text to vertical align in a div container
(3 answers)
Closed 5 years ago.
I'm using Bootstrap v3.2.0 and i have an html structure like this:
<div class="header-seller-profile col-md-12">
<div class="left-header-content col-md-5">
<div class="seller-banner">
<img src="http://bouquet.developers-server.com/pub/media/avatar/banner-image.png" alt="no image">
</div>
</div>
<div class="middle-header-content col-md-4">
<div class="seller-address">
<div class="wefrom">
<a class="cont-name" title="Search" href="http://bouquet.developers-server.com/marketplace/seller/location/shop/dasdasdad?loc=sadasdasd" target="_blank">
<span>sadasdasd</span>
<img class="piccountry" title="View Map" src="http://bouquet.developers-server.com/pub/static/version1504776489/frontend/Mgs/organie/en_US/Webkul_Marketplace/images/country/countryflags/ID.png">
</a>
</div>
</div>
</div>
<div class="right-header-content col-md-3">
<div class="seller-social-media">
<div class="wk-mp-profile-container storename wk-mp-display-block-css">
<a href="//facebook.com/sadasda" target="blank">
<span class="wk-social-icon wk-icon wk-social-icon-fb" title="Check in Facebook"></span>
</a>
<a href="//twitter.com/dasdsadas" target="blank">
<span class="wk-social-icon wk-icon wk-social-icon-tw" title="Check in Twitter"></span>
</a>
</div>
</div>
</div>
</div>
i tried to make the content inside header-seller-profile class align to bottom but it's not working at all, it keeps stick to the top.
here's my css code:
.header-seller-profile{
background-color: #333333;
color: #fff;
display: inline-block;
}
.middle-header-content,right-header-content,left-header-content{
vertical-align: bottom;
}
.seller-banner img{
width: 100%;
}
Are you looking for this ?
https://codepen.io/swapnaranjitanayak/pen/GvaLNJ
CSS:
.header-seller-profile{
background-color: #333333;
color: #fff;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: flex-end;
}
.header-seller-profile img{
vertical-align:bottom;
}
Replace your css
From :
vertical-align: bottom;
To
vertical-align: text-bottom;
Related
This question already has answers here:
How can I horizontally center an element?
(133 answers)
How do I center floated elements?
(12 answers)
Closed 1 year ago.
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 33.33%;
padding: 5px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
<div class="row">
<div class="column">
<img class="python" src="http://assets.stickpng.com/images/5848152fcef1014c0b5e4967.png" alt="Python png" height=100px width=100px>
</div>
<div class="column">
<img class="html" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML png" height=100px width=100px>
</div>
<div class="column">
<img class="js" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript png" height=100px width=100px>
</div>
<div class="column">
<img class="css" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="CSS png" height=100px width=100px>
</div>
</div>
I've been trying to centre the CSS image for so long. I've been googling and googling but I can't seem to find the answer.
You need to check some articles about CSS Layouts
Here is example how to align items to the center with Flexbox:
.row {
display: flex;
flex-direction: column;
align-items: center;
}
As, the width and height of your images are fixed {100px,100px} you can do one simple change and image will center relative to its parent container
img{ margin: 0 auto; }
.row {
display: flex;
justify-content: space-around;
align-items: center;
}
<div class="row">
<div class="column">
<img class="python" src="http://assets.stickpng.com/images/5848152fcef1014c0b5e4967.png" alt="Python png" height=100px width=100px>
</div>
<div class="column">
<img class="html" src="https://upload.wikimedia.org/wikipedia/commons/thumb/6/61/HTML5_logo_and_wordmark.svg/1200px-HTML5_logo_and_wordmark.svg.png" alt="HTML png" height=100px width=100px>
</div>
<div class="column">
<img class="js" src="https://upload.wikimedia.org/wikipedia/commons/6/6a/JavaScript-logo.png" alt="Javascript png" height=100px width=100px>
</div>
<div class="column">
<img class="css" src="https://upload.wikimedia.org/wikipedia/commons/thumb/d/d5/CSS3_logo_and_wordmark.svg/1200px-CSS3_logo_and_wordmark.svg.png" alt="CSS png" height=100px width=100px>
</div>
</div>
This question already has answers here:
How to vertically align an image inside a div
(37 answers)
Center image using text-align center?
(28 answers)
Flexbox: center horizontally and vertically
(14 answers)
How can I center text (horizontally and vertically) inside a div block?
(27 answers)
Closed 2 years ago.
I am trying to create circle cards using HTML and CSS. Upon click I am trying to open a web URL which is working perfectly fine for me.
But then I am not able set the alignment properly.
I tried display: flex to get the images side by side but the space between circle card is more but minimize space?
And I am not able to set the name of the circle in the center of the image. Can anyone please help me how to do this?
.circle {
background: rgba(15, 28, 63, 0.125);
border-radius: 50%;
height: 8em;
object-fit: cover;
width: 8em;
}
h1 {
text-align: center;
}
.row {
display: flex;
}
.circle-one, .circle-two, .circle-three {
flex: 33.33%;
padding: 5px;
}
<div>
<!-- your widget template -->
<h1> Hello World </h1>
<div class="row">
<div class="circle-one">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://images.unsplash.com/photo-1555448248-2571daf6344b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Tyler">
</a>
<h5> Circle One</h5>
</div>
<div class="circle-two">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1000&q=80" alt="Tyler">
</a>
<h5> Circle Two</h5>
</div>
<div class="circle-three">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg" alt="Tyler">
</a>
<h5>Circle Three</h5>
</div>
</div>
</div>
This is what I get
use display flex
use align-items:center
.circle {
background: rgba(15, 28, 63, 0.125);
border-radius: 50%;
height: 8em;
object-fit: cover;
width: 8em;
}
h1 {text-align: center;}
.row {
display: flex;
align-items:center;
justify-content:space-around;
}
.circle-one, .circle-two, .circle-three {
flex: 33.33%;
padding: 5px;
display:flex;
flex-direction:column;
align-items:center;
}
<div>
<!-- your widget template -->
<h1> Hello World </h1>
<div class="row">
<div class="circle-one">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://images.unsplash.com/photo-1555448248-2571daf6344b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80" alt="Tyler">
</a>
<h5> Circle One</h5>
</div>
<div class="circle-two">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://images.unsplash.com/photo-1579546929518-9e396f3cc809?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjExMDk0fQ&auto=format&fit=crop&w=1000&q=80" alt="Tyler">
</a>
<h5> Circle Two</h5>
</div>
<div class="circle-three">
<a href="{{data.my_profile_url}}" target="_blank">
<img class="circle" src="https://cdn.pixabay.com/photo/2015/02/24/15/41/dog-647528_960_720.jpg" alt="Tyler">
</a>
<h5> Circle Three</h5>
</div>
</div>
</div>
well, It is quite a simple task,
can be done in many ways. one of them is,
add div around your text (circle one , circle two, and circle three) and (img + a) tag
and apply css properties to the classes in css.
display: flex;
align-items: center;
justify-content-center;
This question already has answers here:
Vertically align text next to an image?
(26 answers)
Closed 4 years ago.
I have added an image and text. Text has 1 <h6> and 2 <p> tags. I tried using float:left but it does not get displayed side by side.
content.js:
<div className="col l4">
<div className="card1">
<img className="javacardimg" src={java} alt="Java" height="65" width="65"></img>
<h6 className="cardtitle1">New Launch</h6>
<p className="cardcontent1">JAVA</p><p></p>
<p className="cardcontent1">Foundations</p>
</div>
</div>
<div className="col l4">
<div className="card2">
<img className="neuralcard" src={neural} alt="Neural Network" height="65" width="65"></img>
<h6 className="cardtitle2">Enroll Now</h6>
<p className="cardcontent2">Neural Newtwork</p><p></p>
<p className="cardcontent2">Foundations</p>
</div>
</div>
css:
.cardcontent{
float: left;
}
.card1 {
width: 100%;
}
.card1 > h6 {
margin: 0px;
}
I want to display New Launch JAVA Foundations on right of image similarly for card2 but current css does not work I tried few css styling but does not work.
Screenshot:
Try to use Flexbox here...and also wrap your right side content into a div for better practice and readability
.card1 {
display: flex;
align-items: flex-start;
}
h6 {
margin-top: 0;
}
.item {
padding-left: 10px;
}
<div class="card1">
<img className="javacardimg" src="http://via.placeholder.com/100x100?text=JAVA" alt="Java">
<div class="item">
<h6 className="cardtitle1">New Launch</h6>
<p className="cardcontent1">JAVA Foundations</p>
</div>
</div>
I have 4 columns in a row that become 1 column on mobile. The way this looks on mobile is fine, but I want to center the content in divs 2 and 4 in each row. What would be the best way to do this?
Apparently my edit was deleted or the site messed up, but I had said I want to do this vertical and horizontal. However, it was my fault I forgot to link to the page. Sorry, guys. - http://www.dismantledesign.com/testsite2/clients.html
Edit: I appreciate all the answers, but I don't think anyone understands that this div has no set height. I just want that text and icons to stay centered as the screen moves. The flex didn't seem to work because it required setting a height to the div.
I also simplified my HTML
Code
.clientsdetail {
text-align: center;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}
.clientinfo h3 {
padding-top: 10px;;
}
.clientinfo p {
padding: 0px 30px;
font-size: 15px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-md-3 nopadding">
<img class="img-responsive" src="img/clients/ivey.jpg">
</div>
<div class="col-md-3 nopadding cinfo">
<div class="clientinfo text-center">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
<div class="col-md-3 nopadding cinfo">
<img class="img-responsive" src="img/clients/rufus.jpg">
</div>
<div class="col-md-3 nopadding">
<div class="clientinfo text-center">
<h3>RUFUS DAWKINS</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<span class="icon-sprite sprite-tw"> </span>
</div>
</div>
</div>
</div>
You can use flex properties to make your content to center.
for more details, you can check
Flexbox: center horizontally and vertically
(UPDATED)
You can use the Pseudoclass to select the 2 and 4 div.
.row div:nth-child(2n) {
/* Your CSS Style */
}
If the content inside the 2 and 4 div are inline/inline-block, just use text-align: center;.
Demo
Here is the simple demo for the pseudoclass.
.row > div {
padding: 10px;
}
.row > div:nth-child(2n) {
color: #fff;
background: red;
text-align: center;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
}
<div class="row">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
Hope this is helpful for you.
Thanks.
Try a different approach. Bootstrap's floating grid system will not get you where you want.
First, remove row and col- classes so you have something like this:
<div class="my-row">
<div></div>
<div></div>
<div></div>
</div>
Then use CSS to achieve the same result as before, but with the content aligned center:
#media (min-width: 992px) {
.my-row {
display: flex;
align-items: stretch;
}
.my-row > div {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
}
}
If you are using SASS, then replace hardcoded 992px with the #screen-md-min variable.
Here's a JsFiddle of your simplified example:
https://jsfiddle.net/mpnz9b30/1/
<div class="col-md-6 nopadding cinfo">
<div class="clientinfo">
<h3>IVEY</h3>
<p>Clarksville, TN</p>
<div class="social-icons-clients">
<span class="icon-sprite sprite-ig"> </span>
<span class="icon-sprite sprite-fb"> </span>
<span class="icon-sprite sprite-gp"> </span>
<span class="icon-sprite sprite-sc"> </span>
<a href="https://twitter.com/contracoda" target="_blank">
<span class="icon-sprite sprite-tw"> </span>
</a>
</div>
</div>
</div>
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 7 years ago.
Improve this question
I want to place my banner divs one below the other. I tried using different combinations of display and position properties but it doesnt work. They are displaying on top of each other.I want my output as firstly the banner,then below it the row of images and below the row the second banner.
.row div:first-child {
margin-left: 0;
}
.row div {
display: inline-block;
margin-left: 5%;
}
.row div img {
max-width: 100%;
max-height: 100%;
}
.row div a {
word-wrap: break-word;
text-decoration: none;
color: #515150;
}
.row div a:hover,
.row div img:hover {
color: black;
}
.img-container {
display: inline-block;
float: left;
padding-top: 40px;
padding-bottom: 20px;
text-align: center;
width: 150px;
}
.banner {
padding-top: 20px;
border-bottom: 2px solid black;
margin-left: 5%;
color: black;
font-size: 20px;
}
<div class="banner">
<h3>TOP SELLING</h3>
<div class="row">
<div class="img-container">
<a href="#">
<img src="martial.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="bvb.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="ars.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
</div>
<div class="banner">
<h3>TOP SELLING</h3>
<div class="row">
<div class="img-container">
<a href="#">
<img src="martial.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="bvb.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="ars.png">
</a>
</div>
<div class="img-container">
<a href="#">
<img src="lewandowski1.png">
</a>
</div>
</div>
</div>
PS: I also tried using different ids for the banners but it doesnt work.
Either add .banner {clear:both} or remove the unnecessary float from .img-container (the display:inline-block already does that job.)