css - 如何制作右中标题

Question

我正在尝试制作标题。

文本居中，然后右边有一个图像。我试过纯 CSS 和 flexbox，但无法使标题看起来正确。

如何使页眉看起来像这样？

请查看所需设计的图像(忽略“L”上方的垂直线)。

.header {
 background: #43e895;
 height: 10vh;
 width: 100vw;
 text-align: center;
}

.header-title {
 font-family: 'Avenir Next Demi Bold', 'Arial';
 font-size: 17px;
 color: #ffffff;
 padding-top: 10px;
}

.header-title {
 font-family: 'Avenir Next Demi Bold', 'Arial';
 font-size: 17px;
 color: #ffffff;
 padding-top: 10px;
}

.map-icon-container {
  float: right;
}

.map-icon {
  width: 35px;
}

<div class="header">
  <div class="container">
    <div class="header-title">Lunch Tyme</div>
    <div class="map-icon-container"><img src="map_icon" class="map-icon" alt="Map Icon"/></div>
  </div>
</div>

Answer 1

几个选项:

• text-align + position

.header {
 background:linear-gradient(to left, rgba(0,0,0,0.75) 50%, rgba(255,0,100,0.75) 50%)  #43e895;
 height: 10vh;
 width: 100vw;
 text-align: center;
}

.header-title {
 font-family: 'Avenir Next Demi Bold', 'Arial';
 font-size: 17px;
 color: #ffffff;
 padding-top:10px;
}

.map-icon-container {
  position:absolute;
  right:1em;
  top:10px;
}

.map-icon {
  width: 35px;
}

<div class="header">
  <div class="container">
    <div class="header-title">Lunch Tyme</div>
    <div class="map-icon-container"><img src="map_icon" class="map-icon" alt="Map Icon"/></div>
  </div>
</div>

• 显示 + :before
  • A) 表格

.header {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75) 50%, rgba(255, 0, 100, 0.75) 50%) #43e895;
  height: 10vh;
}

.container {
  width: 100vw;
  display: table;
  table-layout: fixed;
}

.header-title {
  font-family: 'Avenir Next Demi Bold', 'Arial';
  font-size: 17px;
  color: #ffffff;
  padding-top: 10px;
  text-align: center;
  display: table-cell;
}

.container:before {
  content: '';
}

.container:before,
.map-icon-container {
  display: table-cell;
  width: 35px;
}

.map-icon {
  width: 35px;
}

<div class="header">
  <div class="container">
    <div class="header-title">Lunch Tyme</div>
    <div class="map-icon-container"><img src="map_icon" class="map-icon" alt="Map Icon" /></div>
  </div>
</div>

• • B) flex https://css-tricks.com/snippets/css/a-guide-to-flexbox/

.header {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75) 50%, rgba(255, 0, 100, 0.75) 50%) #43e895;
  height: 10vh;
}

.container {
  display: flex;
}

.header-title {
  font-family: 'Avenir Next Demi Bold', 'Arial';
  font-size: 17px;
  color: #ffffff;
  padding-top: 10px;
}

.container:before {
  content: '';
}

.container:before,
.map-icon-container {
  flex: 1;
  text-align:right
}

.map-icon {
  width: 35px;
}

<div class="header">
  <div class="container">
    <div class="header-title">Lunch Tyme</div>
    <div class="map-icon-container"><img src="map_icon" class="map-icon" alt="Map Icon" /></div>
  </div>
</div>

• • C) 网格 https://css-tricks.com/snippets/css/complete-guide-grid/

.header {
  background: linear-gradient(to left, rgba(0, 0, 0, 0.75) 50%, rgba(255, 0, 100, 0.75) 50%) #43e895;
  height: 10vh;
}

.container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.header-title {
  font-family: 'Avenir Next Demi Bold', 'Arial';
  font-size: 17px;
  color: #ffffff;
  padding-top: 10px;
}

.container:before {
  content: '';
}

.map-icon-container {
  margin: auto 0 auto auto;
}

.map-icon {
  width: 35px;
}

<div class="header">
  <div class="container">
    <div class="header-title">Lunch Tyme</div>
    <div class="map-icon-container"><img src="map_icon" class="map-icon" alt="Map Icon" /></div>
  </div>
</div>

没有比另一个更好的，好的是满足您的需求并且您理解得足以调整和重用的。由您决定。