Try to align label position bottom of div
<div class="row"> //row is bootstrap
<div class="imgCover">
<img src="" style="height: 100%">
</div>
<label>Button</label>
</div>
try to add display inline and vertivcal align bottow to label tag but not work
insert label button to div and use display:flex for flexible items be the same length you can read here , and add align-items: end; to set position at bottom
div.row{
width:800px;
height:90px;
display: flex;
}
.btn{
width:50px;
height:90px;
display: flex;
align-items: end;
justify-content: center;
}
<div class="row">
<div class="imgCover">
<img src="https://cdn2.downdetector.com/static/uploads/logo/Google-new_19.png" style="height: 90px;width:auto">
</div>
<div class="btn">
<label >Button</label>
</div>
</div>
Related
Trying to center images in a div within a container div.
here is the html, images are contained within the container div
<div class="container">
<div class="col">
<img src="../Images/New folder (2)/Blue Tie.jpg" />
<p>Blue Tie</p>
</div>
<div class="col">
<img src="../Images/New folder (2)/Cardigan.jpg" />
<p>Cardigan</p>
</div>
</div>
here is the css
.container{
display:flex;
max-width: 350px;
text-align: center;
}
.col{
min-width: 100px;
margin-bottom: 30px;
padding:5px;
width:100%;
display:block;
}
.col img{
width:100%;
}
First of all the container should be set to 100% so it can get the whole width. Then you set the container's display to flex and you set the align items and justify content to center so every child is align to center.
Secondly you have to give a specific width to the children otherwise they will equally fill the width of the parent.
.container{
display:flex;
align-items: center;
justify-content: center;
background:lightgrey;
padding: 2rem 0;
}
.col{
max-width: 100px;
margin-bottom: 30px;
padding:5px;
width:100%;
display:block;
}
.col img{
width:100%;
}
<div class="container">
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Blue Tie</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
<div class="col">
<img src="https://image.shutterstock.com/image-photo/colorful-hot-air-balloons-flying-260nw-1033306540.jpg" />
<p>Cardigan</p>
</div>
</div>
Maybe I don't have it setup right? I've been looking at code for the past 3 hours so it's possible I'm over looking something. Either way I have this h3 in a div and I want it to be centered both horizontally and vertically, however only horizontal is working.
<div class="col-md-4">
<div class="align-items-center" style="background-image:url({{ uni.u_homepage_pic.url }}); background-repeat:no-repeat; width: 350px; height: 225px;">
<h3 class="text-center" style="color:#ffffff;">{{ uni.u_name }</h3>
</div>
</div>
Update: Using Bootstrap V4
.align-items-center {
display: flex;
align-items: center; /*Aligns vertically center */
justify-content: center; /*Aligns horizontally center */
}
<div class="col-md-4">
<div class="align-items-center" style="background:red; width: 350px; height: 225px;">
<h3 class="text-center" style="">Hello</h3>
</div>
</div>
This answer is for bootstrap 4:
To vertically align the column content, you can use my-auto class in column itself:
<div class="col-md-4 my-auto">
<div style="background-image:url({{ uni.u_homepage_pic.url }});
background-repeat:no-repeat; width: 350px; height: 225px;">
<h3 class="text-center" style="color:#ffffff;">
{{ uni.u_name }
</h3>
</div>
</div>
Further, to align the items inside a column horizontally, you can use mx-auto and for both horizontal and vertical alignment, use m-auto. Horizontal align will work for single column.
To align all the columns, you need to supply the align-items-* classes inside the row element but not inside the col element:
<div class="container">
<div class="row align-items-start"><!-- align contents to top -->
<div class="col">
Top A
</div>
<div class="col">
Top B
</div>
<div class="col">
Top C
</div>
</div>
<div class="row align-items-center"><!-- align contents to center -->
<div class="col">
Mid A
</div>
<div class="col">
Mid B
</div>
<div class="col">
Mid C
</div>
</div>
<div class="row align-items-end"><!-- align contents to end -->
<div class="col">
Bottom A
</div>
<div class="col">
Bottom B
</div>
<div class="col">
Bottom C
</div>
</div>
</div>
Hope this helps!
try with flex and align-self-center:
<div class=”row”>
<div class=”col-6 align-self-center”>
<div class=”card card-block”>
Center
</div>
</div>
<div class=”col-6">
<div class=”card card-inverse card-danger”>
Taller
</div>
</div>
</div>
check this css
<div class="col-md-4">
<h3 class="centered">{{ uni.u_name }</h3>
</div>
and this is the css (put it in the head tag)
<style>
.centered {
display: flex;
flex-direction: row !important;
align-content: center !important;
justify-content: center !important;
align-self: center !important;
align-items: center !important;
margin:auto;
background-image:url({{ uni.u_homepage_pic.url }});
background-repeat:no-repeat;
width: 350px;
height: 225px;
color:#ffffff;
}
<style>
you can do this like in my example: https://jsfiddle.net/h5xofjqf/
or you just need set a fixed height to your container, then, the h1 would have a
h1 {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
Property is a margin:auto; ...Do this
I'm using a flex container to place a button so that it abuts an input on its right border. I can't get the input to be horizontally centered. How to center it, without eliminating the display: flex?
.flexContainer {
display: flex;
}
<div style="text-align:center">
<div>Enter the search term</div>
<div style="text-align: center">
<div class="flexContainer">
<input id="abc" />
<button id="search" name="search" type="submit">go</button>
</div>
</div>
</div>
Here's the fiddle: https://jsfiddle.net/wpd3b0kt/1/
Just add justify-content: to the CSS:
.flexContainer {
display: flex;
justify-content: center;
}
fiddle update
How can I place 2 divs side by side, both which have images. I want the divs to remain side by side and the images auto size ,with screen size.When I reduce the size of the screen the images re-position themselves one below the other.
How will be the css for the below html?
<div class="container">
<div class="wrapper">
<div class="left">
<img src="img1.png" />
</div>
<div class="right">
<img src="img2.png" />
</div>
</div>
</div>
You can use css float to get contained elements to sit either side
.container {
width: 100%;
}
.left, .right {
width: 50%;
float: left;
}
<div class="container">
<div class="left"><img src='http://placehold.it/350x150'/></div>
<div class="right"><img src='http://placehold.it/350x150'/></div>
</div>
Edit: You can use Flex-Box
.container {
width: 100vw;
display: inline-flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-evenly;
align-items: center;
align-content: space-around;
}
.container > img {
align-self: auto;
margin: 4px;
}
<div class="container">
<img src='http://placehold.it/350x150'/>
<img src='http://placehold.it/350x150'/>
</div>
Try using bootstrap grid's. It can be something like this.
<div class="col-sm-12">
<div class="col-sm-6">
<img src="http://www.thebrandbite.com/wp-content/media/2015/07/apple-7.jpg" width="30%">
</div>
<div class="col-sm-6">
<img src="https://d3nevzfk7ii3be.cloudfront.net/igi/KRLMkuaBjm5mKDDP" width="30%">
</div>
</div>
Demo
I'm trying to make a grid with some icons and their respective id.
For example, I have this code using bootstrap:
.flex {
display: flex;
align-items: center;
height: 200px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet" />
<div class="row flex">
<div class="col-md-2">
<img src="http://placehold.it/300x300" alt="" class="img-responsive">
<p class="text-center channel-number">2</p>
</div>
<div class="col-md-2">
<img src="http://placehold.it/300x100" alt="" class="img-responsive">
<p class="text-center channel-number">4</p>
</div>
<div class="col-md-2">
<img src="http://placehold.it/300x400" alt="" class="img-responsive">
<p class="text-center channel-number">11</p>
</div>
</div>
now the number will just stay right under the image, but I want the number to be horizontally align with the other numbers and centered below the image.
How can I do this?
Using flex or does bootstrap has a way of doing this?
Thanks!
Fiddle
Try this:
HTML (no changes)
CSS
.flex {
display: flex;
min-height: 200px;
}
.flex > .col-md-2 {
display: flex; /* create nested flex container */
flex-direction: column; /* stack children (image and number) vertically */
}
img { margin: auto;} /* forces numbers to bottom edge of container */
Revised Fiddle
Learn more about justify-content and auto margins here:
Methods for Aligning Flex Items