how to give proper alignment for div - html

here is my code, I need to display a page with 3 images one is on the left and other two on the right side but all images are displaying in the same line, they are not displaying in order that I
List item
have given. please help me in solving these.
.leftAlign {
float: left;
}
.rightAlign {
float: right;
margin: 10px;
}
.rightOrder{
float: right;
margin: 10px;
}
.primary-button {
background-color: #109bd5;
color: white;
}
<div class="about-content">
<h4 mat-dialog-title>Hello World</h4>
<div mat-dialog-content>
<div class='leftAlign'>
<h4>IMAGE1</h4>
<img src="assets/images/image1.png">
</div>
<div class='rightAlign'>
<h4>IMAGE2</h4>
<img src="assets/images/image2.png">
</div>
<div class='rightOrder'>
<h4>ICON</h4>
<img src="assets/images/icon_img.png">
</div>
</div>
<div mat-dialog-actions align="end">
<button mat-button mat-dialog-close class="mat-button primary-button">close
</button>
</div>
</div>

<div style="display:flex;justify-content:space-between;">
<div>
<!-- This will be left aligned -->
<img src="https://via.placeholder.com/150?text=1" alt="image 1">
</div>
<div>
<!-- This will be right aligned -->
<div>
<img src="https://via.placeholder.com/150?text=2" alt="image 2">
</div>
<div>
<img src="https://via.placeholder.com/150?text=3" alt="image 3">
</div>
</div>
</div>
Please have look at this, if you are using Bootstrap, I will recommend using it instead of giving inline style.

Related

Bootstrap Columns Order

So I have footer section on the website I'm currently building, and the problem is order of them showing. I want to social icons be above ©
Have a look: footer
html:
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-6">
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
<div class="col-md-6">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
</div> <!-- end of row -->
</div>
css:
#footerbot {
background-color: rgba(34, 48, 71, 0.8);
}
#footerbot img {
display: block;
float: right;
top: 50%;
padding-top: 35px;
padding-left: 15px;
}
#footerbot h5 {
color: #00FFF0;
line-height: 100px;
}
I tried to add class 'order-md-6' to each div with col-md-6, but first of all it didn't work, and secondly it broke layout - it 'pushed' both elements to center. Is it even possible in bootstrap4? I also have a problem centering these items u can see on image I've upload. I'm struggling with this for 2hours and I have no idea how to get this done. I would appreciate any help. Thanks
Bootstrap 4 uses flexbox to position the columns in their rows so you can add the following to your CSS to the control the order of the columns:
.col-md-6:last-child {
order: -1;
}
Not sure if what you provided is the full code sample of your footer or not, but if that's your full html, you're missing a closing tag.
Also, assuming all you want are the icons to go above the copyright line and centered, try this:
#footerbot .socialIcons {
text-align: center;
}
<div id="footerbot">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="socialIcons">
<img src="img/facebook.png" href="#">
<img src="img/twitter.png" href="#">
<img src="img/dribble.png" href="#">
<img src="img/gplus.png" href="#">
<img src="img/youtube.png" href="#">
</div>
<h5 class="fbh">©2018 - Appo, All Right Reserved</h5>
</div>
</div> <!-- end of row -->
</div>
</div>

CSS Vertical Align and fancyBox

I am working on a photo gallery(using fancyBox and PHP) for my photography page, and I can't figure out how to make the vertical align for my image gallery to be centered. I currently have placed mock images(from my own gallery) to figure out the layout, and I will then replace them with a PHP query to fill up the gallery with all my content automatically. I have also given each row a (temporary) different color to simply visualize the layout, as well as having a 12 division layout bar at the top for easier handling. The way I currently have my HTML and CSS code set up is as follows:
HTML:
<div class="gallery">
<div class="row row-one">
<div class="col-lg-4">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='images/photography/thumbs/burnaby_mountain.jpg'></a>
</div>
<div class="col-lg-4">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='images/photography/thumbs/lions_gate.jpg'></a>
</div>
<div class="col-lg-4">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive' src='images/photography/thumbs/bubbles.jpg'></a>
</div>
</div>
</div>
CSS:
.gallery {
display: table;
}
div .row-one {
background-color: red;
display: table-row;
vertical-align: middle;
}
.col-lg-4 {
display: table-cell;
}
As you can see, I have nested the columns inside rows(I did not include the other rows' CSS code, as they're the same except for the background-color attribute, with the intention of automating the gallery later through PHP queries) and rows inside a div container called gallery. From other examples I've seen through looking up for a solution, I've seen people give the main container the display attribute of table, and rows the attribute display: table-row, and lastly the column the table-cell attribute. I have tried this, as well as many other combinations of CSS attributes and have not found a way to center the gallery.
For a better visualization of what I would like to achieve
Thank you for your help, and excuse the lengthy question. I have been searching for a long time and it now feels like something in my code is faulty. I am fairly new to HTML/CSS and although most of my site is working as intended, this is the last bit I need to get it up and running.
Something like this?
.gallery {
display: flex;
height: 30%;
/* flex-direction:column; */
}
.box {
border: 1px solid white;
background: red;
display: flex;
justify-content: center;
flex: 1;
padding: 10px;
}
.inner-box {
align-self: center;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="gallery">
<div class="box">
<div class="inner-box">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='https://i.kinja-img.com/gawker-media/image/upload/t_original/bhjivrw2chm9um9yrrmy.jpg'></a>
</div>
</div>
<div class="box">
<div class="inner-box">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='https://media.gettyimages.com/photos/cocker-spaniel-puppy-picture-id904219284'></a>
</div>
</div>
<div class="box">
<div class="inner-box">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive' src='http://cdn.bangli.uk/images/201504/article_9323_1.jpg'></a>
</div>
</div>
</div>
<div class="gallery">
<div class="box">
<div class="inner-box">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/burnaby_mountain.jpg'><img class='img-responsive' src='https://i.kinja-img.com/gawker-media/image/upload/t_original/bhjivrw2chm9um9yrrmy.jpg'></a>
</div>
</div>
<div class="box">
<div class="inner-box">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/lions_gate.jpg'><img class='img-responsive' height="500px" src='https://media.gettyimages.com/photos/cocker-spaniel-puppy-picture-id904219284'></a>
</div>
</div>
<div class="box">
<div class="inner-box">
<a data-type='image' data-fancybox=landscape data-caption=caption href='images/photography/fres/bubbles.jpg'><img class='img-responsive' src='http://cdn.bangli.uk/images/201504/article_9323_1.jpg'></a>
</div>
</div>
</div>

How do you stack images with aligned output?

I've got these posts which are images and output I'd like to stack in a column, but the divs are stuck on top of each other. I'd like to have them stacked with a bit of margin between them. How do you stack images with aligned output?
<hr />
<div id="listingwrapper">
<div style="float:left;">
<img src="gateway/imgs/stock/profilechick.jpg" />
</div>
<div style="float:left; width: 246px;">
<span style="color:white;"><b>Wicked awesome chick goes to the</b></span><br/>
</div><br/>
<div>
<span style="color:white;"><i>600 views</i></span>
</div>
</div>
<div id="listingwrapper" style="clear:both;">
<div style="float:left;">
<img src="gateway/imgs/stock/profilechick.jpg" />
</div>
<div style="float:left; width: 246px;">
<span style="color:white;"><b>Wicked awesome chick goes to the</b></span><br/>
</div><br/>
<div>
<span style="color:white;"><i>600 views</i></span>
</div>
</div>
try this demo here
#listingwrapper {
clear: both;
margin-top: 35px;
overflow: hidden;
}

Organizing a gallery of Images into 2 columns, 4 images per line

I am stuck on how to arrange images for my gallery.php page so that there are 4 images per line. My first thought was to use 2 divs, one as column 1 and one as column 2, and then have two spans inside the divs labeled left and right, and float the span left float left, and the other span right. I made sure two make the widths of each of the column divs 50% and each image width 25% however it still did not work.
Here is the HTML portion of my code, and below the HTML is CSS.
<p id="service">Gallery of Completed Sabers</p>
<div class="col1">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
<div class="col2">
<span class="left">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
<span class="right">
<img src="images/corran.jpg" alt="Corran Horn" />
<p>GCS:Corran Horn</p></span>
</div>
CSS
div.col1 {
width:50%;
}
div.col2 {
width:50%;
}
span.left {
float:left;;
}
span.right {
float:right;
}
img {
width: 25%;
}
I am going to keep messing around, and see, maybe I will try 4 different columns.
Thank you
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
<section class="column">
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
<div class="image-container">
<img src="https://m1.behance.net/rendition/modules/128626743/disp/bdf7c7afb76e0a0866cea43416c4b555.jpg">
</div>
</section>
*{
margin: 0px;
padding: 0px;
}
.column{
width:100%;
min-height:200px;
background:red;
border-bottom:1px solid blue;
}
.image-container{
width: 25%;
height: 200px;
float: left;
}
.image-container img{
max-height: 200px;
width: 100%;
}

Aligning images horizontally in CSS?

trying to align two images horizontally but it's not working:
HTML
<div data-role="page" id="development">
<div data-role="header">
<h1>Develop</h1>
</div>
<div id="images">
<p><img src="../../images/screen1.png" width="250" height="444" alt="Start Screen" </p>
<p><img src="../../images/screen2.png" width="250" height="444" alt="Search Screen"</p>
</div>
<div data-role="main" class="ui-content">
Back
</div>
</div>
CSS
#images {
display: block;
margin: 0 auto;
clear: right;
}
I've found other answers online but couldn't implement them to work. Any help please?
<p> are block level elements. To get the images to sit next to each other horizontally, use:
p {
display:inline;
}
jsFiddle example
Try this
<div data-role="page" id="development">
<div data-role="header">
<h1>Develop</h1>
</div>
<div id="images">
<img src="../../images/screen1.png" width="250" height="444" alt="Start Screen" />
<img src="../../images/screen2.png" width="250" height="444" alt="Search Screen"
</div>
<div data-role="main" class="ui-content">
Back
</div>
</div>
CSS
#images {
display: inline-block;
margin: 0 auto;
clear: right;
}