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;
}
Related
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.
How can I align img in center to the respective to the text below it? The wrapper div is aligned left.
<div class="wrapper">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
Add another wrapper around the com-icon and com-text. And then align that were you want it. Example below:
<div class="wrapper">
<div class="wrapper-inner">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
</div>
Add this to your css file:
.wrapper{
text-align: center;
}
or if you just want to check if it's working you can add the infamous inline style.
This not a recommended method other than just to see if it's OK!
<div class="wrapper" style="text-align:center;">
<div class="com-icon">
<img src="images/IT.png" alt="laptop logo">
</div>
<div class="com-text">
<p>IT Solutions</p>
</div>
</div>
make a table
table.center {
text-align: center;
margin-left: auto;
margin-right: auto;
}
.com-text,
.com-icon {
margin: auto;
}
<div class="wrraper">
<table class="center">
<tr>
<td>
<div class="com-icon">
<img src="image.jpg" alt="laptop logo">
</div>
</td>
</tr>
<tr>
<td>
<div class="com-text">
<p>IT Solutions</p>
</div>
</td>
</tr>
</table>
</div>
Why is my text not centered & why is my is my floats not stacked evenly:
https://jsfiddle.net/t5mLm8p6/2/
<H1 class="header-text"> SPECIAL COLORSHIFTING RED/CYAN INLAY FROM REDA </H1>
<div class="images-on-left-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_02_1.jpg" width="577" height="417" />
</div>
<div class="images-on-right-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_03.jpg" width="623" height="417" />
</div>
<H1 class="header-text"> FUNKY URBAN INLAY FROM ZEGNA REDA</H1>
<div class="images-on-left-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_06_1.jpg" width="623" height="416" />
</div>
<div class="images-on-right-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_05.jpg" width="577" height="416" />
</div>
<H1 class="header-text"> CLASSIC BLUE PATTERN FROM VITALE BARBERIS</H1>
<div class="images-on-left-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_08.jpg" width="575" height="416" />
</div>
<div class="images-on-right-side" >
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_09.jpg" width="625" height="417" />
</div>
I try to make the divs 6 divs/images stand side by side:
Like here: http://postimg.org/image/urstgg0s7/
But the next text a margin options makes it uneven for some reason.
Wrap your divs in a row. It should be like this--
.row {
border: 1px solid red
}
.row h1 {
text-align: center
}
.row div {
display: inline-block;
width: 290px;
}
.row div > img {
width: 100%
}
<div class="row">
<H1 class="header-text"> SPECIAL COLORSHIFTING RED/CYAN INLAY FROM REDA </H1>
<div class="images-on-left-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_02_1.jpg" width="577" height="417" />
</div>
<div class="images-on-right-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_03.jpg" width="623" height="417" />
</div>
</div>
<div class="row">
<H1 class="header-text"> FUNKY URBAN INLAY FROM ZEGNA REDA</H1>
<div class="images-on-left-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_06_1.jpg" width="623" height="416" />
</div>
<div class="images-on-right-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_05.jpg" width="577" height="416" />
</div>
</div>
<div class="row">
<H1 class="header-text"> CLASSIC BLUE PATTERN FROM VITALE BARBERIS</H1>
<div class="images-on-left-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_08.jpg" width="575" height="416" />
</div>
<div class="images-on-right-side">
<img src="http://www.stock11.ch/media/wysiwyg/inlays/Landingpage_1200pix_inlay-page_09.jpg" width="625" height="417" />
</div>
</div>
\
I read many article about vertical alignment but how can I align 3 images horizontally from middle?
<div class="notification-from-picture"> <img src="images/1.jpg" class="img-circle" /> </div>
<div class="notification-between-from-to"> <img src="images/2.jpg"/> <div>
<div class="notification-to-picture"> <img src="images/3.jpg" class="img-circle"/>< /div>
just do this it will work:
.notification-from-picture,
.notification-between-from-to,
.notification-to-picture
{
display: inline;
}
.notification-from-picture,
.notification-between-from-to,
.notification-to-picture {
display: inline-block;
}
and then put a wrapper div around the divs like so
<div id="image-wrapper">
<div class="notification-from-picture"> <img src="images/1.jpg" class="img-circle" /> </div>
<div class="notification-between-from-to"> <img src="images/2.jpg"/> <div>
<div class="notification-to-picture"> <img src="images/3.jpg" class="img-circle"/>< /div>
</div>
and then do
#image-wrapper {
text-align: center;
}
HTML CODE
<div class="header" style="float:left">
<div class="logo">
<img src="some image" height="200px" width="200px"/>
</div>
<div class="name">company name</div>
<div class="pic">
<img src="some image" height="200" width="200"/>
</div>
</div>
CSS styling
header{background-color:red;width:1200px;height:400px;float:;}
.logo{width:17%;}
.name{color:#ADFF2F;font-size:48pt;margin-left:250px;width:38%}
.pic{;margin-left:950px;}
.header > div {
float: left;
}
Also, your header class in the CSS needs to have a . in front of it.
You also need to remove the margin-left from .pic
http://jsfiddle.net/samliew/DAC7p