Is there a way to align texts, image and map in the same line here

<b style = "color:#777777">Date : </b> 2015-06-14 
<b style = "color:#777777">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Image : </b> 
<img src="https://observation.org/photos/as.jpg"alt="Ts" width="400" height="400"> 
<b style = "color:#777777">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Location : </b> 
<iframe src = "https://maps.google.com/maps?q= 152 , 22.1 &hl=es;z=18&amp;output=embed" width="400" height="400"></iframe>
<br><br>

Right now, it is getting displayed as below. But it should get aligned in the middle

CodePudding user response：

You can use display: flex and align-items: center on the container parent of those elements:

.container {
display: flex;
align-items: center;
}

<div >
  <b style="color:#777777">Date : </b> 2015-06-14
  <b style="color:#777777">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Image : </b>
  <img src="https://observation.org/photos/as.jpg" alt="Ts" width="400" height="400">
  <b style="color:#777777">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Location : </b>
  <iframe src="https://maps.google.com/maps?q= 152 , 22.1 &hl=es;z=18&amp;output=embed" width="400" height="400"></iframe>
  <br><br>
</div>

CodePudding user response：

As per the comment - if you wrap the desired content in another HTML element you can apply css Flexbox rules to that container - like this perhaps:

b{
  color:#777777;
  display:inline-flex;;
}
.fbmid{
  box-sizing:border-box;
  border:1px solid black;
  display:flex;
  flex-direction:row;  
  justify-content:space-around;
  align-items:center;
  align-content:center;
  
  min-height:400px;
}
iframe,img{ /* for demo only*/
  width:200px;
  height:200px;
}

<div class='fbmid'>
  <b>Date : </b> 2015-06-14 
  <b>Image : </b> 
  <img src="//observation.org/media/photo/61782660.jpg" alt="Ts" width="400" height="400" /> 
  <b>Location :</b> 
  <iframe src="//maps.google.com/maps?q=152,22.1&hl=es;z=18&amp;output=embed" width="400" height="400"></iframe>
</div>