I am trying to align the text with my image but it ends up lower than the image, i have tried setting margin to zero, etc. and if i move the text up or down the image will follow along, i dont believe i have any code that causes this, what is the issue?
<!--HTML-->
<div id="description">
<img src="Images/cookie.jpeg" alt="">
<p >Mmm.. Cookies, who doesn't like these fun filled treats? Today i will show you my grandmothers recipe for the best cookies on planet earth
</div>
CSS
.description {
display:inline-block;
width:300px;
height:150px;
border:2px;
border-color:black;
border-style:solid;
border-radius:5px;
padding:5px;
margin-top:50px;
}
.recipe-img {
border-radius:15px;
display:inline-block;
object-fit:cover;
width:300px;
height:150px;
overflow:hidden;
border:2px;
border-style:solid;
border-color:black;
}
CodePudding user response:
Use Flex for your div #description
just add this code in your CSS
#description {
display: flex;
align-items: center;
justify-content: space-between;
}
Because this flex aligns everything to the vertically center of the div and keep space between elements.
And remove the margin-top: 50px
property from your paragraph,
CodePudding user response:
#description{
display: flex;
align-items: center;
}