这一直困扰着我。我目前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%;
}
另外(如果你到目前为止,你不必回答这个。我只是好奇),你如何获得全屏检查元素?每当我使用它时,它占用了显示网站部分的页面的一部分,但我希望它显示全屏结果[(已经回答)]。
答案 0 :(得分:1)
尝试使用text-align:
#div06 {
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
text-align: center;
}
要使chrome dev-tools全屏显示,请按下靠近侧面的3个小点(菜单按钮),然后在“Dock side”旁边有一个“弹出”按钮。这将创建一个新窗口,您可以根据需要调整其大小。
答案 1 :(得分:0)
我的朋友告诉我,我应该使用一张桌子,它有效!以下是代码片段:
<强> 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;
}