Mona Jalal Mona Jalal - 5 months ago 15
HTML Question

Showing school logo in bootstrap well

so is there a nicer way to show the school logo in a well? Like how can I stick it to the right upper corner not inline with the text?

<div class = "well well-lg" style="background-color: #F2F2F2;">
<img class ="m-a-1 m-y-1" style="padding: 20px 0; display: inline-block;">
M.Sc. in Computer Sciences.
University of Wisconsin-Madison, Madison, WI, USA.
Graduated in May 2016.
<img src="./assets/img/UW.png" alt="" style="height:100px; width:100px;"> </img>
</span>
</div>


Here's what I see:
enter image description here

Also I have tried the following but still doesn't look as nice:

<div class = "well well-lg" style="background-color: #F2F2F2;">
<img class = "m-y-1" src="./assets/img/sharif.png" alt="" style="height:100px; width:100px;"> </img>
<span class ="m-a-1 m-y-1" style="padding: 20px 0; display: inline-block;">
M.Sc. in Computer Engineering <br/>Majored in Computer Architecture.
Sharif University of Technology, Tehran, Iran. </br>
Graduated in June 2011.
</span>
</div>


enter image description here

Turns out I am being super unclear. I want the image to be like the second image in this question however vertically aligned in the middle. The following code puts the image above the text:

<div class = "well well-lg" style="background-color: #F2F2F2;">

<span class ="m-a-1 m-y-1" style="padding: 20px 0; display: inline-block;">
<img class = "m-y-1" src="./assets/img/sharif.png" alt="" style="height:100px; width:100px; display: inline-block; vertical-align: middle;">
<p>
M.Sc. in Computer Engineering <br/>Majored in Computer Architecture.
Sharif University of Technology, Tehran, Iran. </br>
Graduated in June 2011.
</p>
</span>
</div>


enter image description here

Answer

So first off, there are a couple things wrong with your code.

  1. You have an opening <img> tag and you're trying to close it with a </span>. I assume you meant for that to be a <span>.
  2. <img> tag's are not closed by </img>. You need to do <img />.

Now to fix your problem, just add display: flex; align-items: center; to your <div>.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class = "well well-lg" style="background-color: #F2F2F2; display: flex; align-items: center;">
    <img class = "m-y-1" src="http://xaonon.dyndns.org/logos/portal/aperture_science.png" alt="" style="width: 100px; height: auto; padding-right: 10px;" />
    <span class ="m-a-1 m-y-1" style="padding: 20px 0; display: inline-block;">
    M.Sc. in Computer Engineering <br/>Majored in Computer Architecture.
    Sharif University of Technology, Tehran, Iran. <br />
    Graduated in June 2011.
    </span>
</div>

JSFiddle

You can learn more about flexbox here.

<div class = "well well-lg img-rounded" style="background-color: #F2F2F2; display: flex; align-items: center;">
    <img class = "m-y-1" src="./assets/img/sbu.png" alt="" style="width: 100px; height: auto; padding-right: 5px;" />
    <span class ="m-a-1 m-y-1" style="padding: 20px 0; display: inline-block;">
        B.Sc. in Computer Engineering <br/>Majored in Hardware Engineering.
        Shahid Beheshti University, Tehran, Iran. <br />
        Graduated in June 2009.
    </span>
</div>

Works as expected: enter image description here