HTML/CSS: как выровнять границы текста и изображения?
Это беспокоило меня некоторое время. У меня сейчас 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%;
}
Кроме того (если вы зашли так далеко, вам не нужно отвечать на этот вопрос. Мне просто любопытно), как вы получаете полноэкранный контроль элементов? Всякий раз, когда я его использую, он занимает часть страницы, которая отображает часть веб-сайта, но я хочу, чтобы он отображал результаты в полноэкранном режиме [(Ответ был получен)].
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;
}
Попытка использования text-align:
#div06 {
margin-top:3%;
display:inline-block;
width:100%;
line-height:100%;
text-align: center;
}
А чтобы сделать Chrome dev-tools полноэкранным, нажмите 3 маленькие точки рядом с боковой стороной (кнопка меню), а рядом с "Dock side" есть кнопка "выскакивать". Это создаст новое окно, с помощью которого вы можете изменить размер, сколько вам нужно.