HTML/CSS：如何將文本的邊框與圖像對齊？

Question

這已經困擾我一段時間了。 我目前已將包含"Facebook"一詞vertically align a border與圖像垂直對齊，但垂直對齊並未將單詞與圖像完全居中。

更新 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 dev-tools 全屏顯示，請按靠近側面的 3 個小點（菜單按鈕），在“Dock side”旁邊有一個“彈出”按鈕。 這將創建一個新窗口，您可以根據需要調整大小。

Answer 2

我的朋友告訴我應該用一張桌子，它奏效了！ 這是代碼片段：

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：如何將文本的邊框與圖像對齊？

問題描述

2 個解決方案

解決方案1
1 2016-10-05 23:00:12

解決方案2
0 已采納 2016-10-06 19:12:24

HTML/CSS：如何將文本的邊框與圖像對齊？

問題描述

2 個解決方案

解決方案1 1 2016-10-05 23:00:12

解決方案2 0 已采納 2016-10-06 19:12:24

解決方案1
1 2016-10-05 23:00:12

解決方案2
0 已采納 2016-10-06 19:12:24