Я хочу выровнять логотип в левом конце div и текст в центре этого div (текст должен выглядеть как в центре экрана). Ширина div подходит для экрана. И логотип, и текст должны быть на одной линии. Как это сделать возможным? У меня есть начало, как показано ниже. Но показывает два элемента построчно.
<div >
<img id="imglogo" alt="" src="images/ logo.JPG" style="width: 300px;height:75px" />
<h1 align="center" id="H1">Project Name</h1>
</div>
Лично я предпочитаю стол, так как он довольно удобно размещает вещи и надежен. Смотри ниже:
<table border=1 style="table-layout: fixed; width:100%">
<tr>
<td><img id="imglogo" alt="" src="https://placehold.it/100x35" /></td>
<td style="text-align: center">Centered Text</td>
<td></td>
</tr>
</table>И, конечно же, вы можете настроить его так, как пожелаете.
Вы можете сделать это с помощью flexbox. Заголовок будет центрирован в пространстве рядом с изображением.
.wrapper {
display: flex;
}
.wrapper>div, h1 {
flex: 1;
}
h1 {
text-align: center;
}<div class="wrapper">
<div><img src="https://placehold.it/300x75" /></div>
<h1>Project Name</h1>
</div>Один из подходов заключается в использовании absolute в относительных позициях:
h1 {text-align:center;position:relative;height:50px;line-height:50px;}
#imglogo {height:50px;position:absolute;left:0;}
h1 {
text-align: center;
position: relative;
height: 50px;
line-height: 50px;
margin-bottom: 4px;
}
#imglogo {
height: 50px;
position: absolute;
left: 0;
}<div>
<h1 id="H1">
<img id="imglogo" alt="" src="http://lindseymiller.github.io/FEWD/Homework/acme-corp-mine/images/acme-corp.jpg" /> Project Name
</h1>
Some more text
</div>Я думаю, что это достигает эффекта, который вам нужен. Некоторые примечания:
<h1>, чтобы она была выровнена по вертикали с логотипом. Это не сработает, если заголовок переносит строки.Вы можете использовать столбцы начальной загрузки.
img {
max-width: 300px;
float: left;
}
h1 {
text-align: center;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet" />
<div class="row">
<div class="col-xs-5">
<img class="img-responsive" src="https://placehold.it/300x75" />
</div>
<div class="col-xs-7">
<h1>Project Name</h1>
</div>
</div>
float: right. Первые оказываются справа больше всего, когда вы думаете, что они окажутся слева от правой стороны. И позиционирование имеет тенденцию быть очень хакерским и легко испортится при изменении разрешения. 06.03.2017