I have the following markup which uses bootstrap 4:-
<div class="container">
<div class="row ">
<div class="col-xl-12">
<img src="~/img/img1.png" style="height:60.3px;width:750px" class="mx-auto d-none d-sm-block" />
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<img src="~/img/img2.png" class="mx-auto d-block" />
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
<p style="color: #2EBDBE;font-weight:bold;font-size:13px;margin-bottom: 0px;">...</p>
</div>
</div>
</div>
Currently i got this layout:-
where the images are centered while the text is left aligned, so how i can force the text to have the same vertical alignment as the images?
Try this, but edit classes or whatever to make it work on your site:
<div class="container" style="position:relative; display:inline-block;">
<img class="mx-auto d-none d-sm-block" style="display:block; height:60.3px;width:750px" src="https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/close-up-of-tulips-blooming-in-field-royalty-free-image-1584131603.jpg">
<div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
<p class="centeredTxt" style="display: block; color: #333;">Text is centered under image</p>
</div>
<div class="text-box" style="position:relative; height:100%; text-align: center; display:flex; justify-content: center; align-items: flex-start; width: 100%;">
<p class="centeredTxt" style="display: block; color: #333;">Text is centered under image 2</p>
</div>
</div>
Difficult to understand how this would work in your code as I don't have the complete code, but I edited my answer to better suit your request.
Related
I have an issue with flexbox, where the 2 flex boxes side by side, do not share an equal height when scaling the page. I'll include a picture below, but one box contains a react-bootstrap carousel, while the other contains text. How do I keep them at the same height so that they will scale on all screen sizes?
Here is the JSX
<div className={styles.floatchild1}>
<Carousel fade className={styles.viewMap}>
<Carousel.Item>
<img
className="d-block w-100"
src="/open.jpeg"
alt="Front View of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="/inside.jpeg"
alt="Inside of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="/side-view-container.jpeg"
alt="Side View of HICO Storage Unit, Grand Junction Colorado"
/>
</Carousel.Item>
</Carousel>
<Button
className={styles.viewMapButton}
href="https://www.google.com/maps/place/2487+Commerce+Blvd,+Grand+Junction,+CO+81505/#39.0906152,-108.5944703,17z/data=!3m1!4b1!4m5!3m4!1s0x87471d18f2c3486b:0xe36fb2de2017f121!8m2!3d39.0906111!4d-108.5922816"
target="_blank"
>
+ View Map
</Button>
<div className={styles.buttonIdRow}>
<p></p>
<a>Jump to:</a>
Units
</div>
</div>
<div className={styles.floatchild2}>
<p>
Self Storage in <u>Grand Junction</u>, Co
</p>
<h2 className={styles.hicoLogo}>
<b>
<u>HICO Storage Company</u>
</b>
</h2>
<div className={styles.addressPhone}>
<h3 className={styles.address}>
<div className={styles.pinPicture}>
<Image
src="/pin.png"
alt="location pin"
width={20}
height={28}
/>{" "}
</div>
<div className={styles.location}>
2487 Commerce Blvd, Grand Junction, CO 81505
</div>
</h3>
<h3 className={styles.phoneWrapper}>
<div className={styles.phonePicture}>
<Image
src="/phone.png"
alt="location pin"
width={25}
height={25}
/>{" "}
</div>
<div className={styles.phone}>
<a className={styles.phoneColor} href="tel:8088962272">
<b>808-896-2272</b>
</a>
</div>
</h3>
</div>
<hr />
<div className={styles.hours}>
<div className={styles.officeHours}>
<p className={styles.TimeTitle}>Office Hours</p>
<p className={styles.TimeP}>
8:30am - 5:30pm Monday - Saturday
</p>
<p className={styles.TimeP}>10:30am - 3:30pm Sunday</p>
</div>
<div className={styles.officeHours}>
<p className={styles.TimeTitle}>Gate Hours</p>
<p className={styles.TimeP}>24/7 access</p>
</div>
</div>
<hr />
<Button href='/contact' className={styles.interestedButton}>Interested? Contact Us</Button>
</div>
</div>
And here is the CSS I'm using to style it
.wrapper {
overflow: hidden;
min-width: 300px;
display: flex;
flex-direction: row;
width: 90%;
font-family: 'southern';
align-items: center;
}
.floatchild1{
background: white;
flex:1;
min-width: 380px;
align-items: center;
}
.floatchild2 {
background: white;
flex:1;
min-width: 380px;
align-items: center;
padding: 4%;
}
Just change
align-items: center;
at .wrapper to
align-items: stretch;
Working codepen: https://codepen.io/maty1000/pen/oNEqvGY
im so clueless in css,I have a loader,when i click the function it just starts below the image ina div which is so ugly,i want it to come over, it any idea?
<div class="card" (click)="SendToBank($event)">
<div class="k-block" *ngIf="loadingSpinner">
<div class="spinner-border text-info" role="status" >
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card-body">
<img class="bank-logo" src="../assets/Img/2.png" id="seb">
<span> SEB</span>
</div>
</div>
any idea how i can achieve that?
Well you just need to position it fixed and style it a little bit.
Read more here css position
I left out the Angular related code.
.k-block {
position:fixed;
display:flex;
width: 100%;
height: 100%;
left:0;
top:0;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.5)
}
<div class="card">
<div class="k-block">
<div class="spinner-border text-info" role="status">
<span class="sr-only">Loading...</span>
</div>
</div>
<div class="card-body">
<img class="bank-logo" src="../assets/Img/2.png" id="seb">
<span> SEB</span>
</div>
</div>
I'm uploading images from a rails app I have developed and inside the edit form the currently uploaded images appear in one line only:
This is the setup I have:
<div class="container-image">
<% #attachments.each do |attachment| %>
<div class="item-image">
<div class="pinImage">
<%= image_tag(attachment.image.url(:mini))%>
<p style="font-size: 13px;">
<%= link_to "Remove", remove_item_attachment_path(attachment),
data: { confirm: "Are you sure?"},
:method => :delete %></p>
</div>
</div>
<% end %>
</div>
and this is the css:
.pinImage img
width: 100%
height: auto
border: 1px solid #d9d9d9
border-radius: 6px
background-color: white
.container-image
max-width: 1200px
display: flex
align-items: center
-webkit-justify-content: center
/* Safari */
justify-content: center
.item-image
padding: 5px
display: block
But I want the images to appear aligned as an image gallery like the following. Any idea how a can fix this?
Try this updated CSS. Added flex-wrap: wrap; and removed justify-content: center from container-image div. Also remove default margins from body.
body {
margin: 0;
}
.pinImage img {
width: 100%;
height: auto;
border: 1px solid #d9d9d9;
border-radius: 6px;
background-color: white;
}
.container-image{
max-width: 1200px;
display: flex;
flex-wrap: wrap;
align-items: center;
}
.item-image{
display: block;
width: 25%;
}
<div class="container-image">
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
<div class="item-image">
<div class="pinImage">
<img src=""/>
<p style="font-size: 13px;">
delete
</p>
</div>
</div>
</div>
I'd like to make some sort of a program page for a festival. I want to create a list of images with little text underneath. I don't succeed in placing the text underneath (it always ends up next to the images instead of underneath). Can somebody help?
It should look like this:
[img1] [img2] [img3]
[text1] [text2] [text3]
[img4] [img5]
[text4] [text5]
... and so on
The size of the images is fixed, so that the rows with only 2 images are the same size as those who have 3.
This is my code in CSS thus far:
For the texts (small and big):
.prog_big{width:321px; height:434px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left; text-align:center}
.prog_small{width:207px; height:283px; margin-left:30px; font-family: Lucida Sans,Calibri; font-size:16px; float:left;text-align:center}
For the images (small and big):
.poster_big{width:321px; height:434px; margin-left:30px; float:left}
.poster_small{width:207px; height:283px; margin-left:30px; float:left}
I don't this this is a css issue really. You can achieve this in HTML with this type of layout
<figure>
<img src="your_Image">
<figcaption>text here</figcaption>
</figure>
Division and image tags are not inline element. Because of this reason they will create a new line in the screen for each of them.
Make them inline, using the css "display:inline-block". They will stand side by side.
div.first-row div, div.second-row div {
display:inline-block;
float:left;
width:100%;
}
div.first-row div {
width: 33.3%;
}
div.second-row div {
width: 50%;
}
div img {
width:100%;
height:auto;
}
p {
text-align:center;
}
<div class='first-row'>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
</div>
<div class='second-row'>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
<div>
<img src='http://via.placeholder.com/140?text=image'>
<p>Some Text Here</p>
</div>
</div>
A flexbox solution:
.row {
display: flex;
flex-flow: row;
justify-content: flex-start;
}
.column {
display: flex;
flex-flow: column;
justify-content: flex-start;
margin-right: 10px;
}
p {
width: 100%;
text-align: center;
}
<div class="row">
<div class="column">
<img src="http://placehold.it/100" />
<p>Text 1</p>
</div>
<div class="column">
<img src="http://placehold.it/100" />
<p>Text 2</p>
</div>
</div>
<div class="row">
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 3</p>
</div>
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 4</p>
</div>
<div class="column">
<img src="http://placehold.it/60" />
<p>Text 5</p>
</div>
</div>
Issue: So vertical alignment issue is I have two divs in the last column and I'm trying to get one to stay at top and one to stay at the bottom regardless of how the central column grows. I can work this out by using fixed heights but that's no good in this case.
Here is my code example : JS Fiddle
HTML:
<div class="row" class="property-bundle"><!-- (x) number of these -->
<div class="col-xs-11 wrapper">
<div class="row">
<div class="col-xs-2 pull-left vendor">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-xs-8 properties-list">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 1</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 2</p></div>
</div>
<div class="row"><hr/></div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10"><p>Flat 3</p></div>
</div>
</div>
<div class="col-xs-2 costs"><!-- costs column -->
<div class="row total">
<h3 class="text-right">TOTAL: £1,2M</h3><!--stay at top-->
</div>
<div class="row" class="fees"> <!--stay at bottom-->
<div class="col-xs-12">
<hr/>
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.wrapper {border: 1px solid black; padding: 10px; margin: 15px;}
.vendor {min-width: 120px;}
.properties-list {background-color: aquamarine}
.costs {vertical-align: top; min-width: 150px; vertical-align: center}
.fees {vertical-align: bottom; }
h3 {font-weight: 400}
h4 {color: green}
.total { margin-right: 0px; }
Hi you can try using flexbox
I just change your html like this:
<div class="col-xs-2 costs">
<!--stay at top-->
<div class="total">
<h3 class="text-right">TOTAL: £1,2M</h3>
</div>
<hr/>
<div class="materials">
<p class="text-right">+ Materials £300K</p>
<p class="text-right">+ Build £100K</p>
</div>
</div>
</div>
Then I add on costs div display:flex;and on total div flex-grow: 1 This flex-grow will push materials on bottom of div.
You just need to add on body, html, row and costs div height:100%
Here is css:
.costs {
vertical-align: center;
display: flex;
flex-direction: column;
height: 100%;
}
.total {
flex-grow: 1;
}
You can see example on this link: https://jsfiddle.net/3L5Lbwhn/9/
Ok I simplified this a bit, but essentially flex did what I needed so many thanks to Edin Puzic for putting me on the right lines! It also allowed me to fix the 1st and last col width and make the middle one dynamic horiontally too.
JsFiddle
<div class="row-flex">
<div class="col-flex-1">
<img src="http://placehold.it/100x100" />
</div>
<div class="col-flex-2">
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 1</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 2</p>
</div>
</div>
<div class="row">
<hr/>
</div>
<div class="row" class="property-line">
<div class="col-xs-2"><img src="http://placehold.it/80x140" /></div>
<div class="col-xs-10">
<p>Flat 3</p>
</div>
</div>
</div>
<div class="col-flex-3">
<div class="pos-top">
<div class="row right-text">
TOP right
</div>
</div>
<div class="pos-bottom">
<div class="row right-text">
<p>
BOTTOM right
</p>
</div>
</div>
</div>
</div>
CSS
.row-flex {
height: auto;
display: flex;
flex-flow: row column;
}
.col-flex-1 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.col-flex-2 {
width: 80%;
border-left: 1px #ccc solid;
flex: 1 1;
}
.col-flex-3 {
min-width: 200px;
border-left: 1px #ccc solid;
flex: 0 0;
}
.flex-container {
display: -webkit-flex;
display: flex;
width: 100%;
height: 100%;
background-color: lightgrey;
}
.pos-top {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-start;
align-items: flex-start;
background-color: yellow;
}
.pos-bottom {
display: -webkit-flex;
display: flex;
height: 50%;
width: 100%;
-webkit-align-items: flex-end;
align-items: flex-end;
background-color: green;
}
.right-text {
text-align: right;
width: 100%;
}