如何使用HTML和CSS在标题中对齐照片旁边的文本?

Question

是否有办法将圆圈置于标题右侧与文本对齐的位置?

形象这是我的代码:

.header {
padding: 3px;
text-align: left;
background: #7e8f94;
color: white;
font-size: 25px;
}
.brand_logo_container2 {
height: 70px;
width: 70px;
border-radius: 50%;
background: white;
padding: 3px;
float: right;
}
.clearfix {
clear: both
}

<div class="header">
<p>Information Centre</p>
<div class="brand_logo_container2">
</div>
<div class="clearfix"></div>
</div>

任何帮助都将是感激的:)

Answer 1

一个快速的解决办法是给<p>元素一个float: left

Answer 2

试试这个

.header p{width:50%;display:inline-block;}