Horizontal Align Two Images in a DIV - html

I have two images that I'm trying to center align horizontally. Currently they look like this...
But, I would like the "APPLY NOW" button to be horizontally aligned like so...
My current code for the two images is this...
<img class="alignright" src="image1.png" alt="" />
<img src="image2.png" align="right">
I've attempted to center align them without CSS, and I'd prefer not to use CSS if there is a way I can do it without it. If I have to use CSS, then I'd appreciate any help that is provided!
Thanks!

With CSS just use the vertical-align property with the value middle
More about vertical-align: http://www.w3schools.com/cssref/pr_pos_vertical-align.asp
Without css... I've no idea.

add the following css to the parent box or element which the images are in:
style="display:table-cell; vertical-align:middle;"
hth

Just apply two rules to the second image .
<img class="alignright" src="image1.png" alt="" />
<img class="center" src="image2.png" align="right">
css code:
.center{
positon:relative;
top:50%;
bottom:50%;
}

Related

How do I reposition my image to the right with HTML and CSS?

I need to move my image a bit to the right, but not fully.
This is what I currently have,
and this is how I need it to look like.
This is the code I have for the image currently:
<div>
<img src="../Hozier.png" width="245" height="600">
</div>
I am very new to HTML and really need some help. Thank you in advance.
You can add margin to the left side of the img element with CSS.
<div style="margin-left: 100px;"><img src="../Hozier.png" width="245" height="600"></div>
You can change the 100px value to move the image to the right more or less as needed.
You can do the following:
<div>
<img src="../Hozier.png" width="245" height="600" style="margin-left:100px;">
</div>
Or use positioning and other methods.
But the following code seems to be useless:
you can use position to move it style:"position: relative; left: 10px"

How do i align two pictures with different heights HTML

[I am working on a website as school project and i want to align these two pictures. One of them the Öppettider is way to low.]
This is what the website looks like.
Here is the code for the pictures
<p> </p>
<img src="../oppettider.gif" width="" height="500" alt=""/>
<img src="la-carte-förrätter.gif" width="680" height="2608" alt=""/>
you can use flexbox:
<div class="images-flex">
<img src="../oppettider.gif" width="" height="500" alt=""/>
<img src="la-carte-förrätter.gif" width="680" height="2608" alt=""/>
</div>
then in css:
.images-flex {
display: flex;
align-items: flex-start;
}
align means one after another ?
the best way is using bootstrap u can easily do it
according to me the best way of doing is using grid system use this link and try to implement ...
https://getbootstrap.com/docs/4.4/layout/grid/

How to lay 2 images side by side in html?

This is my current code:
<figure class="half">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
Unfortunately perhaps because the images are too wide, it still puts the second image on the next line. I want to avoid this - no matter how wide things get. How can I do this?
Just add css display:flex to parent container of images in your case figure.
<figure class="half" style="display:flex">
<img style="width:400px" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
<img style="width:600px" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
<figcaption>Caption describing these two images.</figcaption>
</figure>
You could put your images into table cells.
<figure class="half">
<table>
<tr>
<td>
<img style="width:400px;" src="http://alexmarshall12.github.io/assets/img/colored_1693146.png">
</td>
<td>
<img style="width:600px;" src="http://alexmarshall12.github.io/assets/img/one-piece-1693146_colored2.png">
</td>
</tr>
</table>
<figcaption>Caption describing these two images.</figcaption>
</figure>
I recommend just using a <span> tag and put no space in between them, then they will be side by side.
This could be achieved in many ways.
You could use flexbox
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
You could wrap it grid system and set image width to 100% or create table and set width of each td to be 50%
You can even set css for all of your images to be exactly the same size.
I've created a little fiddle for you https://jsfiddle.net/7kophdxq/.
I would strongly recommend using flexbox, since its the 'new way' of doing these kind of things. Of course you could use a table, but it isn't tabular data right?
For the general structure:
<div class="columns">
<div class="columns__item"></div>
<div class="columns__item"></div>
</div>
Each columns__item has a width of 50%. Inside each columns__item I've put a little image (and made sure it will not exceed a width of 100% of its container):
<figure>
<img src="http://lorempixel.com/400/400/" />
<figcaption>Image caption</figcaption>
</figure>
Hope it helps!
.half img {
display:inline-block;
}
.half figcaption {
display:block
}
or, if you want to keep images in one line, regardless the container size:
.half {
white-space:nowrap;
}
.half img {
display:inline;
}
.half figcaption {
display:block
}
Pick whatever suits you best;)

Vertically align text and image

I know this is duplicate but sorry as solution given on other post seems not working for me or I didn't got them correctly.
I need to vertically align text and image to middle. Tried CSS property vertical-align:middle but it seems, is not working. My code is given at JSFiddle and as follow
<div class="picacollinvitecoll">
<span>Other Collaborators:</span>
<img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" />
<img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" />
<img width="20px" height="20px" src="https://m.ak.fbcdn.net/profile.ak/hprofile-ak-ash4/187580_670310756_917182522_q.jpg" title="Kapil Sharma" />
</div>​
CSS properties are
.picacollinvitecoll span{
margin:0;
}
.picacollinvitecoll img{
margin-top: 3px;
}​
I'm getting output as shown on JSFiddle, which is aligned at the bottom. Can someone please update JSFiddle to make it align at 'middle'.
You are looking for CSS vertical-align:middle
See here
You need to add vertical-align: middle; to both of the selectors (if I understand you correctly)
http://jsfiddle.net/Kyle_Sevenoaks/mbhLN/
Use display:table for the parent div
Check the demo here http://jsfiddle.net/zcaT3/10/
Try this code into your css:
.picacollinvitecoll img{
margin-top:-3px;
vertical-align:middle;
padding-top:2px;
}​
here is another way to do it. use align attribute of image, here is updated fiddle
http://jsfiddle.net/zcaT3/7/

Why will <p> come up after set align="left" on <img>

<img ...>
<p>..</p>
Without setting align="left" on img,p will start from a blank line.
<img ... align="left">
<p>..</p>
But after setting align="left",p will come up around img,why?
I guess that <img> align attribut will work like CSS float property. It makes your image float. If you want <p> to stay under <img> so you should do it like this.
<img ... align="left" />
<div style="clear: both;"></div>
<p>..</p>
Float image to left or right using CSS
HTML uses the align attribute:
<img src="image.jpg" align="right">
XHTML uses an inline style:
<img src="image.jpg" style="float: right" />
The proof:
HTML img align Attribute
The align attribute of <img> is
deprecated, and is not supported in
HTML 4.01 Strict / XHTML 1.0 Strict
DTD.
Use CSS instead.
CSS syntax: <img style="float:right"
/>
Setting align html attribute to left or right on an image is equivalent to css floating the image.
Read about inline and block elements. I don't remember any good site (in English) with explanation of difference between these two types right now, so try to Google it.
Setting align="left" (this should be converted to its equivalent in CSS: float: left) makes img element floating. Once again read about floats.
Perhaps it's better to try :
<p><img align="left" /></p>
Or may be :
<img align="left" />
<p style="clear:left"></p>