在bootstrap中显示学校徽标

Question

那么有更好的方式在井中展示学校标识吗？就像我怎样才能将它贴在右上角而不是与文本内联？

<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>

这是我看到的：

此外，我尝试了以下但仍然看起来不太好：

<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>

原来我很不清楚。我希望图像像这个问题中的第二个图像，但在中间垂直对齐。以下代码将图像放在文本上方：

<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>

Answer 1

首先，您的代码存在一些问题。

1. 您有一个开始<img>标记，并且您尝试使用</span>关闭它。我认为你的意思是<span>。
{li> <img>代码未被</img>关闭。您需要<img />。

现在要解决您的问题，只需将display: flex; align-items: center;添加到<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

您可以详细了解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/sharif.png" alt="" style="width: 100px; height: auto; padding-right: 10px; padding-left: 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>

按预期工作：