zachvaldez
asked on
Using Flexbox as UI
I would like to add an image inside a flexbox, under a paragraph. Can you provide CSS or HTML code for that?
ASKER
Thanks ! I would like to center an image inside the flexbox too!
ASKER
It is not working centering the jpg file
.flex-item-right {
background-color: dodgerblue;
padding: 10px;
flex: 50%;
margin: 0 auto;
}
.inner-div {
height:400px;
width:400px;
margin: 0 auto;}
<div class="flex-item-right">
<h3>In commemoration of the Vets</h3>
<br>
<div class="inner-div">
<img src="D:\DVets\VPicture.jpg">
</div>
</div>
Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Here is an example https://jsfiddle.net/lenamtl/ospcgu23/
You can adjust to your needs
Some useful references
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#media_objects
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Typical_Use_Cases_of_Flexbox#center_item
I would use Boostrap for this https://getbootstrap.com/docs/5.1/utilities/flex/#media-object
This will set your website responsive so it will adjust to device width.