HTML/CSS: 如何将文本的边框与图像对齐？

Question

这个问题困扰了我一段时间。我目前 vertically align a border 将单词 "Facebook" 包含在图像中，但是垂直对齐并未使单词与图像完全居中。

更新 1：我正在使用 Width 100% and Line-Height 100%。这接近我想要的但不完全是。 https://gyazo.com/f67cff590476c9e11601172b5b1dafd5 我希望边框和图像对齐。这是我的旧代码：

HTML

<div id="div06">
    <img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
    <span id="span01">Facebook</span>
</div>

CSS

#div06
{
    margin-top:3%;
    display:inline-block;
    width:100%;
    line-height:100%;
}
#img01{
    width:10%;
    vertical-align:middle;
}
#span01
{
    border:3px solid blue;
    padding: 35px;
    margin: 25;
}

这是我当前的编辑：

#div06{
  margin-top:3%;
  width:100%;
  line-height:100%;
}
#img01{
    width:10%;
    vertical-align:middle;
}
#span01{
    border:3px solid #3b5998;
    color:#000000;
    font-family:arial, bold;
    font-size: 30px;
    padding: 35px;
    margin: 25;
}

它在完整版中是垂直对齐的，但在视觉上不是（https://gyazo.com/f67cff590476c9e11601172b5b1dafd5在此屏幕截图中，文本居中对齐但顺序不对齐。如何使边框对齐？）。我希望他们对齐。如果它在视觉上对你来说是垂直的，那么这个问题只存在于完整版本中。我想这可能是图像，但我不知道。我该如何解决这个问题？

此外，如果您需要完整代码，我会在下面提供。

完整代码

HTML

<head>
    <!--
    Assignment: Personal Website
    Date:  10/4/16
    Name:  Bradley Elko
    -->
    <link rel="stylesheet" href="personalWeb1.css">
</head>
<body>
    <div id="div01">
        <h1 id="h101">Bradley's Website</h1>
    </div>
    <div id="div02">
        <h3 id="h301"><a href="personalWeb1.html" id="a01" style="text-decoration:none">My Band</a></h3>
        <h3 id="h302"><a href="personalWeb1.html" id="a01" style="text-decoration:none">My Handlers</a></h3>
        <h3 id="h303"><a href="personalWeb1.html" id="a01" style="text-decoration:none">My Ideas</a></h3>
    </div>
    <div id="div03">
        <div id="div04">
            <h2 id="h201">Formal Unknown Cereal Killer</h2>
        </div>
        <div id="div05">
            <p id="p01">Date: 10/05/2016 (Latest Update)
            <blockquote>
                Summary:
                <br/>
                <br/>
                Formal Unknown Cereal Killer is a band I made on September 30th, 2016. I don't have anyone else in it, but I will keep trying to get more members. The band will be a metalcore band(a rock genre). I may implement other instruments into the band (such as a violin, flute, clarenet, or another unique instrument). If you want to keep up to date check us out. The links are down below.
            </blockquote>
            <div id="div06">
                <img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/>
                <span id="span01">Facebook</span>
            </div>
            <div id="div07">
                <img id="img02" src="https://pbs.twimg.com/profile_images/767879603977191425/29zfZY6I.jpg"/>
            </div>
        </div>
    </div>
</body>

CSS

a:link{
    color:#1a0000;
    border-right:2px solid;
    border-left:2px solid;
    padding:5;
}
a:visited{
    color:#950f0f;
}
a:hover{
    color:red;
}
a:focus{
    color:#eeeedd;
}
#div01 {
    position:fixed;
    top:0px;
    left:0px;
    right:0px;
    height:80px;
    bottom:90%;
    font-family:Arial, Helvetica, sans-serif;
    font-size:25px;
    background-color:#73778c;
    color:#950f0f;
    text-align:center;
    border-top:3px solid #950f0f;
    border-bottom:2px solid #950f0f;
    padding-top:0;
    display:inline-block;
}
#h101{
    margin-top:10;
    margin-bottom:10;
}
#div02{
    position:fixed;
    top:85px;
    left:0px;
    right:0px;
    display:inline-block;
    background-color:#73778c;
    color:#950f0f;
    border-bottom:2px solid #950f0f;
    text-align:center;
    padding-top:5;
    padding-bottom:5;
    font-family:verdana;
    font-size:12px;
}
#h301{
    display:inline;
}
#h302{
    margin-left :20%;
    margin-right:20%;
    display:inline;
}
#h303{
    display:inline;
}
#div03{
    position:fixed;
    padding-top:0;
    top:114px;
    left:0%;
    right:0%;
    bottom:0%;
    background-color:#73778c;
    color:#950f0f;
    border-bottom:3px solid #950f0f;
}
#div04{
    font-size:30;
    text-align:center;
    margin-top:-30;
}
#h201{
    font-family:Times New Roman;
}
#div05{
    margin-left:100;
    margin-right:100;
    margin-bottom:100;
    margin-top:-30;
    padding-top:10;
    padding-bottom:10;
    padding-left:30;
    padding-right:20;
    border:3px solid #950f0f;
    background-color:#e0e0d1;
}
#div06{
    margin-top:3%;
    display:inline-block;
    width:100%;
    line-height:100%;
}
#div07{
    margin-top:3%;
}
#img01{
    width:10%;
    vertical-align:middle;
}
#span01{
    border:3px solid blue;
    padding: 35px;
    margin: 25;
}
#img02{
    width:10%;
}

此外（如果你已经了解到这里，你就不必回答这个问题了。我只是好奇），你如何获得全屏检查元素？每当我使用它时，它都会占用显示网站部分的页面的一部分，但我希望它显示全屏结果[（已回答）]。

Answer 1

正在尝试使用文本对齐：

#div06 {
  margin-top:3%;
  display:inline-block;
  width:100%;
  line-height:100%;
  text-align: center;
}

要使 chrome 开发工具全屏显示，请按靠近侧面的 3 个小点（菜单按钮），在 'Dock side' 旁边有一个按钮 'pop out'.这将创建一个新的 window，您可以根据需要调整大小。

Answer 2

我的朋友告诉我应该使用 table 并且它起作用了！这是代码片段：

HTML

<table>
    <tr>
        <div id="div06">
            <th><img id="img01" src="https://www.facebook.com/images/fb_icon_325x325.png"/></th>
            <th><span class="span01"><a class="a02" style="text-decoration:none" target="_blank" href="https://www.facebook.com/groups/247367778991930/">Our Facebook Band Group</a></span></th>
        </div>
    </tr>
</table>

CSS

#img01
{
    width:100px;
    height:100px;
    vertical-align:middle;
}
span.span01
{
    border:3px solid #ffffff;
    color:#000000;
    font-family:arial;
    font-size: 16px;
    padding:38.5px;
    margin: 25;
}

HTML/CSS: 如何将文本的边框与图像对齐？

HTML/CSS: How do I Align The Border Of Text To An Image?

html

css

inspect