Header 内容 alignment / 定位

Question

我有一个项目，我在 CSS 中定位元素。 我想创建一个 header 与联系号码和 email 右侧和中心的图像。 下面是代码。 非常欢迎解决我面临的这个问题的建议。

 header { display: block; text-align: center; } #cw-logo-trans { width: 200px; display: inline-block; align-items: right; font-size: 24px; } #contacts { margin-left: 5px; float: left; color: white; font-size: 1.5em; /* 40px/16=2.5em */ color: white; }.home { width: 70px; height: auto; background-color: white; padding: 10px; margin: 10px; float: left; text-align: center; }

 <header> <span id="cw-logo-trans" alt="cw-logo-trans"> <img src="images/cw_logo.png" alt="cw-logo-" > </span> <span id="contacts">0800 111 111</br>email@emailyou.com</span> <div class="home" alt="Home-button"><a href="">Home</a></div> </br> </header>

Answer 1

或者您也可以使用 Flex。

 .outer { display: flex; background-color: lightgray; }.outer div { flex: 1; align-items: center; }.logo { display: flex; justify-content: center; }

 <div class="outer"> <div></div> <div class="logo"> <image src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png" height="40px" width="40px" /> </div> <div> <p>markzuckerberg@twitter.com</p> <p>1234567890</p> </div> </div>

Answer 2

在这里你 go, position: absolute; 用于使徽标精确到中心。

 header { padding: 1em; background: #000; color: #fff; position: relative; text-align: right; }.logo { position: absolute; top: 0; left: 0; text-align: center; width: 100%; height: 100%; padding: 1em 0; box-sizing: border-box; }.logo img { max-height: 100%; }

 <header> <div class="logo"> <img src="https://dummyimage.com/100x100/fff/000&text=logo" alt="cw-logo-"> </div> <div class="contact"> <div>0800 111 111</div> <div>email@emailyou.com</div> </div> </header>