I have the two images below in HTML and wanted to put them next to each other,however it seems one gets placed under the other.I have used the CSS display:inline-block to address this issues.
HTML :
<figure>
<div class="child">
<img class="childhood" src="/home/ali/FullStack/try/Images/1.JPG">
<img class="childhood" src="/home/ali/FullStack/try/Images/2.JPG">
<figcaption>
SOME TEXT
</figcaption>
</div>
</figure>
CSS:
.childhood {
display: inline;
float:left;
margin: 0px;
padding: 0px;
}
I Was wondering what am I doing wrong that is preventing the two images from being displayed next to each other?
your code is working, maybe the size of your two images can't fit in the screen
check this code:
.childhood {
display: inline;
float:left;
margin: 0px;
padding: 0px;
width: 200px;
}
<figure>
<div class="child">
<img class="childhood" src="https://i.ibb.co/c3y4KSf/104938518-2777265905826942-8721565023138927238-o.jpg">
<img class="childhood" src="https://i.ibb.co/c3y4KSf/104938518-2777265905826942-8721565023138927238-o.jpg">
<figcaption>
SOME TEXT
</figcaption>
</div>
</figure>
try this:
.child {
display: flex;
aign-items: center;
justify-content: center;
flex-wrap: wrap;
}
figcaption {
width: 100%;
}
.childhood {
width: 50%;
}
Let me know
Related
I'm new to coding and basically don't understand anything and I've been trying to solve this problem for about a week and haven't got anywhere close
here is my HTML code
.cats {
height: 118px;
width: auto;
object-position: 1px;
display: inline-block;
vertical-align: middle;
}
<div>
<img class="cats" src="black.jpeg" alt="beautiful cat">
<span style="text-align: center;">cutie</span>
</div>
I'm trying to have the image at the left like it is by default and have my text in the same line aligned to the center of the page.
Is this what your looking for? For the <img> to be positioned at the top left of the viewport and the <span> text to be centered on the page. Try this out.
.cats {
height: 118px;
width: auto;
object-position: 1px;
display: inline-block;
vertical-align: middle;
}
.container {
display: flex;
align-items: center;
}
.container span {
/* width: 85%; vary width to your liking if need be */
margin: 0 auto;
}
<div class="container">
<img class="cats" src="https://i.ibb.co/56tbCQP/Screen-Shot-2021-02-25-at-8-46-16-PM.png" alt="beautiful cat">
<span style="text-align: center;">cutie</span>
</div>
You can add display: block to span tag.
<span style="text-align: center; display: block">cutie</span>
If I'm understanding you correctly that you want the text centered and to the right of the photo then flexbox can help here. Try this snippet:
<div style="display: flex; align-items: center">
<img class="cats" src="black.jpg" alt="beautiful cat">
<span style="text-align: center; padding-left: 20px;">cutie</span>
</div>
If you are wanting the text below the picture I suggest using <figure> and <figcaption>:
<figure>
<img class="cats" src="black.jpg" alt="beautiful cat">
<figcaption style="text-align: center;">cutie</figcaption>
</figure>
I'm practicing CSS and I stumbled across a minor problem. I have and article tag with a headline(h2) and a figure. I want to move the headline to be below the figure tag.
I tried to float the headline the right and that worked but the problem was I couldn't get it below the figure. When I obviously made the figure smaller so the headline would fit but I figured if I make it big enough in width it would push down the headline. Nope, the headline just spanned over, like it covered the figure.
article h2 {
text-align: center;
color: #405377;
padding: 1em;
clear:both;
}
article figure {
background: #ebe3ff
}
article img {
display: block;
max-width: 25em;
min-width: 5em;
max-height: 13em;
margin-left: auto;
margin-right: auto;
}
<h2>Headline</h2>
<figure>
<img src=""alt="image">
<figcaption>text</figcaption>
</figure>
<p>Text text</p>
If you use order: -1; on the item with display: flex; on the container, this will bring that item up to the top.
div {
display: flex;
flex-direction: column;
}
h2 {
text-align: center;
color: #F9F9FA;
background: #a8a8ff;
padding: 1em;
}
figure {
background: #ebe3ff;
order: -1;
}
img {
display: block;
max-width: 25em;
min-width: 5em;
max-height: 13em;
margin: 0 auto;
}
<div>
<h2>Headline</h2>
<figure>
<img src="#"/>
<figcaption>text</figcaption>
</figure>
<p>Text text</p>
</div>
Have you tried to simply move the <h2> below the image?
Like the following:
article h2 {
text-align: center;
color: #405377;
padding: 1em;
clear:both;
}
article figure {
background: #ebe3ff
}
article img {
display: block;
max-width: 25em;
min-width: 5em;
max-height: 13em;
margin-left: auto;
margin-right: auto;
}
<figure>
<img src=""alt="/>
<figcaption>text</figcaption>
</figure>
<h2>Headline</h2> <!-- moved the h2 below -->
<p>Text text</p>
The easiest way is a outer container with display flex
Here you can find more information about display:flex
Also you had a missing " at yout alt="" tag
.outer{
display:flex;
flex-direction:column-reverse;
}
article h2 {
text-align: center;
color: #405377;
padding: 1em;
clear:both;
}
article figure {
background: #ebe3ff
}
article img {
display: block;
max-width: 25em;
min-width: 5em;
max-height: 13em;
margin-left: auto;
margin-right: auto;
}
<div class="outer">
<h2>Headline</h2>
<figure>
<img src=""alt=""/>
<figcaption>text</figcaption>
</figure>
</div>
<p>Text text</p>
As others have pointed out, you could just move the actual h2 element and place it under the figure, but it seems you want to see if its possible with css alone.
There are a few ways, not ideal ways, but there are ways:
You could adjust the margins of both elements, for example, the h2 element will have a top margin of 50px and the figure element will have a top margin of negative 50px (-50px) (probably one of the worst ways to do it)
Another way is to simply give the elements a table layout display of table-footer-group and table-header-group like this:
<h2 style="display: table-footer-group;">Headline</h2>
<figure style="display: table-header-group;">
<img src="" alt="">
<figcaption>text</figcaption>
</figure>
<p>Text text</p>
I have a row with seven small images and a heading which I need to stack horizontally but they're stacking vertically. This is how it looks -
I'm sure this is really simple but I'm stumped. I'm using reset & skeleton grid. This is the relevant code -
HTML
<section id="products">
<div class="container">
<div class="row">
<div class="twelve columns agencyproducts">
<h2>WHAT PRODUCT ARE YOU INTERESTED IN?</h2>
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
<img src="images/post-production.png" alt="Post-Production" style="width:50px;height:50px;">
<h4>POST PRODUCTION</h4>
<img src="images/animation.png" alt="Animation" style="width:50px;height:50px;">
<h4>2D / 3D ANIMATION</h4>
<img src="images/ADHOC.png" alt="ADHOC" style="width:50px;height:50px;">
<h4>ADHOC</h4>
<img src="images/interactive.png" alt="Interactive" style="width:50px;height:50px;">
<h4>INTERACTIVE & PERSONALISED</h4>
<img src="images/tv-adverts.png" alt="TV ADVERTS" style="width:50px;height:50px;">
<h4>TV ADVERTS</h4>
<img src="images/360.png" alt="360 Video and VR" style="width:50px;height:50px;">
<h4>360 VIDEO & VIRTUAL REALITY</h4>
</div>
</div>
CSS
section#products {
height: 700px;
max-width: 100%
}
.row {
height: 350px;
max-width: 100%;
}
.agencyproducts {
position: relative;
display: block;
text-align: center;
}
.agencyproducts img {
position: relative;
line-height: 1;
top: 50%;
}
.agencyproducts h4 {
display: block;
text-align: center;
font-size: 10px;
}
The h4 tags which you re using as captions are block elements, which means, their width is 100% by default. Also, you have nothing that associates/unifies them with the images they belong to.
The common way nowadays is to use a figuretag to wrap image and text, and put the text into a figcaptiontag inside that figure tag. Then apply text-align: center; and display: inline-block; to the figure tag to center image and text inside and allow them to appear next to each other:
figure {
text-align: center;
display: inline-block;
max-width: 100px;
vertical-align: top;
margin:10px;
}
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image with a longer caption
</figcaption>
</figure>
<figure>
<img src="http://placehold.it/80x80/cac">
<figcaption>
This is an image
</figcaption>
</figure>
Images and Headers by default have display set to block, meaning they are on their own lines. float used to be the preferred way of achieving single-line display for block elements but it should be avoided as float has some weird behaviors. Instead we now use display: inline-block; or display: inline; - apply this to the elements you want on a single line and it will make it so!
just example (not copying your code - just simple example script):
HTML:
<div>
<img src="one.png" class="inlineImg" />
<img src="two.png" class="inlineImg" />
<img src="three.png" class="inlineImg" />
</div>
CSS:
.inlineImg {display: inline;}
this will display the images on a single line (providing the div is big enough)
.agencyproducts {
position: relative;
display: inline-flex;
text-align: center;
}
And you could put the main title outside of row div
That should all make them horizontal. You may need to add some padding to separate the items tho.
You can wrap the img- and h4-Tags with a div-Tag and make it float.
<div class="wrapper">
<img src="images/production.png" alt="Production" style="width:50px;height:50px;">
<h4>2K / 4K PRODUCTION</h4>
</div>
CSS:
.wrapper {
float: left;
}
Don't forget to unfloat afterwards.
The H4 will make them 'stack' vertically. Best to enclose each image and heading in it's own block or span, and on that div/span use " display: block; float: left;".
Basicly the h4 element has automaticly a wifth of 100%, you can check this easily with the inspection tool of your browser.
The easiest was is to put a div arround h and img element
<div class="containerIcon">
//img element
//h element
</div>
.conainterIcon {
display: block;
width: 13%, //So they all fit in one line
float: left;
}
Put the image and the title below in a div, and float them all to the left. Like so—
.bullet-point { float: left; }
.clear-float { clear: both; }
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
<div class="bullet-point">
<img src="images/production.png" alt="Production">
<h4>2K / 4K PRODUCTION</h4>
</div>
.
.
.and so on
<div class="clear-float"></div>
I want to arrange the two images in my HTML page side by side.
I want the images to stay side by side even if the page size changes.
I also want the second image to span the entire header of the page ie. all the space left after the first image. The images here are of different size.
For now, I have arranged two images side by side, but when I change the size of the page, the image wraps and comes in the next line after the first image.
Here is my code sample and the CSS:
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
height: 120px;
}
<img class="header" src="http://www.placehold.it/160X120" style="float: left;" alt="CCM Logo">
<img class="header" src="http://www.placehold.it/543X120/0000FF" alt="CCM Banner">
Here is a Fiddle.
Use white-space: nowrap to prevent wrapping.
.header {
margin: 0 auto; max-width: 800px; /*centering header*/
height: 120px; position: relative; /*scale header images to 120px*/
white-space: nowrap; /*keep one-line*/
overflow: hidden; /*hide excess images parts on small screens*/
}
.header>img { height: 100%;}
<body>
<div class="header">
<img src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" alt="CCM Logo">
<img src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</div>
</body>
.header {
display: inline-block;
margin-left: auto;
margin-right: auto;
max-width: 50%;
height:120px;
}
HTML:
<body>
<img class="header" src="http://www.www8-hp.com/in/en/images/T-GE-healthcare-logo__153x115--C-tcm188-1616301--CT-tcm188-1237012-32.jpg" style="float: left;" alt="CCM Logo">
<img class="header" src="http://blu-alliance.com/wp-content/uploads/2013/10/healthcare-banner2.jpg" alt="CCM Banner">
</body>
Give style
.header {
display: block;
float:left;
height: 120px;
}
to both images
Apply below style:
.header {
display: inline-block;
height: 120px;
width: 50%;
}
Try with max-width Demo
.header {
max-width:50%;
}
Try this -
<div class="imgclass">
<div class="img1">
your img here
</div>
</div>
<div class="imgclass">
<div class="img2">
your img here
</div>
</div>
On your css file or between <style>here</style> this -
.imgclass {
display: table-cell;
}
I have a small 2x2 HTML table. Each cell contains one image and one piece of text.
Example image:
As you can see, the text is vertically below the vertically middle level of the image. How can I make the text vertically in the center, relative to the image on the left?
I have tried a several different display values, which I can't fix this.
JSFiddle: http://jsfiddle.net/ahmadka/rbJNQ/
this all div behave like a
table: it is a rectangular block that participates in a block formatting context
.main-container is TABLE
.container is ROWS
.inner-container is CELLS
now all div behave like a table I just vertical align middle image so all content align in middle
.main-container{
display:table;
background:#bcbbbb;
width:100%;
height:100vh;
}
.container{
display:table-row;
}
.inner-container {
vertical-align: middle;
display: table-cell;
text-align: center;
}
.inner-container figure{
background-color:#807c7c;
vertical-align: middle;
display: inline-block;
margin: 0;
}
.inner-container p {
display: inline-block;
}
<div class="main-container">
<div class="container">
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
</div>
<div class="container">
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
<div class="inner-container">
<figure>
<img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.svg?v=6e4af45f4d66" alt="stack" width="100" height="100">
</figure>
<p>Example</p>
</div>
</div>
</div>
Well. Try this:
<td>
<a id="social_twitter" onclick="window.open(this.href,'external'); return false;" href="http://twitter.com/JenierTeas">
<span>icon</span>
</a>
<span style="vertical-align: middle;">Twitter</span>
</td>
Your code looks way to complicated for this. It is also not really tabular data, so you should not use a <table>-element.
You can solve it as easy as this. I included only the important CSS rules in this answer.
HTML
<div class="social_body">
<a class="facebook">Facebook</a>
<a class="twitter">Twitter</a>
<a class="google">Google+</a>
<a class="share">Share This</a>
</div>
CSS
.social_body {
width: 280px;
overflow: hidden;
margin: 0 auto;
border: 1px dashed black;
}
.social_body a {
float: left;
width: 50%;
font-size: 16px;
line-height: 24px;
}
.social_body a:before {
content: '';
float: left;
width: 24px;
height: 24px;
margin: 0 10px 0 0;
background: transparent 0 0 no-repeat;
}
.social_body a.facebook:before {
background-image: url(http://i.imgur.com/QglLT5Q.png);
}
.social_body a.twitter:before {
background-image: url(http://i.imgur.com/QglLT5Q.png);
}
/* […] You see where this is going. */
Demo
Try before buy
Use This Css
//CSS
#nst_block #social_body table {
background: none repeat scroll 0 center transparent;
border: 1px dashed black;
height: 75px;
margin: 0 auto;
width: 280px;
}
#nst_block #social_body table a {
border: 0 none;
font-family: inherit;
font-size: 16px;
font-style: inherit;
font-weight: inherit;
line-height: 24px;
margin: 0;
outline: 0 none;
padding: 0;
vertical-align: baseline;
}
Updated Link :http://jsfiddle.net/rbJNQ/16/
I realize that this question is 4 years old, but hey, why not answer it - maybe it helps someone else, since the OP probably solved it one way or another in the meantime.
In 2017 your problem, Ahmad, is solved fairly easy with the help of a flexbox (just Google it, you'll surely like it - if you haven't heard of it already, that is) set for the direct 'children' of the table's td-s. What you have to do is add the following to the CSS in your fiddle:
#nst_block #social_body table td > *
{
display: flex;
justify-content: flex-start;
align-items: center;
}
The main axis positioning is done by justify-content and the cross axis positioning (the vertical one, in your case) is done by align-items.
That's all.
You can design it using tables. Keep icon in one cell and text in other cell. Make them vertical-align as middle. So how what ever height the icon may be, text will be aligned vertically middle. Or If you are targeting only new browsers, then you can design this using flex box model.