使用宽度将 DIV 宽度拟合到其内部文本答案

【问题标题】：Fitting DIV width to its internal text using width使用宽度将 DIV 宽度拟合到其内部文本
【发布时间】：2018-04-13 23:31:37
【问题描述】：

我正在尝试让多段文本彼此相邻并以页面为中心。除非更改 div 的宽度，否则它们当前显示在左侧。我将如何使 div 与其内容的宽度匹配，或者是否有另一种方法可以将其置于页面中心？

HTML 是这样的；

.navigation-container {
width: auto;
display: inline-block;
margin: auto;
padding-left: auto;
padding-right: auto;
}

p {
font-family: 'Roboto', serif;
font-size: 1.5vh;
text-align: center;
padding-left: 1vw;
padding-top: 0vw;
padding-bottom: 0vw;
float:left;
color: #000000;
line-height: 0em;
}

<div class="navigation-container">
<p>Pg1</p> <p>Pg2</p> <p>Pg3</p> <p>Pg4</p> <p>Ph5</p>
</div>

除非更改容器宽度，否则文本将显示在页面左侧。我如何才能将这段文本的所有 5 部分居中？

【问题讨论】：

请在下面查看我的答案以获取可用的 Codepen。您应该在这里使用列表而不是 <p>。像这样设置原始 HTML 元素的样式并不是一个好习惯。

标签： html css alignment

【解决方案1】：

由于您的.navigation-container 是inline-block 元素，因此您需要将text-align:center 用于其父元素。在 sn -p body 是您的父元素，因此请尝试添加 text-align: center。然而，最好的方法是将您的 .navigation-container 包装到另一个 div 并将 text-align: center 应用到它，因为 body 会影响整个页面。

另外padding: auto 是一个无效值，所以最好删除它。

body {
  text-align: center;
}

.navigation-container {
  width: auto;
  display: inline-block;
  margin: auto;
}

p {
  font-family: 'Roboto', serif;
  font-size: 1.5vh;
  text-align: center;
  padding-left: 1vw;
  padding-top: 0vw;
  padding-bottom: 0vw;
  float: left;
  color: #000000;
  line-height: 0em;
}

<div class="navigation-container">
  <p>Pg1</p>
  <p>Pg2</p>
  <p>Pg3</p>
  <p>Pg4</p>
  <p>Ph5</p>
</div>

【讨论】：

【解决方案2】：

您可以使用display: flex; wrap 或 nowrap up to you，justify-content: center 将文本居中。或者您可以将text-align: center 用于display: inline-block;

.navigation-container {
width: auto;
display: flex;
flex-flow: row nowrap;
justify-content: center;
margin: auto;
padding-left: auto;
padding-right: auto;
}

p {
font-family: 'Roboto', serif;
font-size: 1.5vh;
text-align: center;
padding-left: 1vw;
padding-top: 0vw;
padding-bottom: 0vw;
float:left;
color: #000000;
line-height: 0em;
}

<div class="navigation-container">
<p>Pg1</p> <p>Pg2</p> <p>Pg3</p> <p>Pg4</p> <p>Ph5</p>
</div>

【讨论】：

【解决方案3】：

这是您需要的工作示例。使用列表而不是段落，它不会换行，您也不需要添加很多奇怪的样式。

https://codepen.io/anon/pen/QmRJZw

HTML：

<div class="navigation-container">
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
</div>

CSS：

.navigation-container {
  width:100%;
  height:auto;
  text-align:center
}

.navigation-container ul li{
  display:inline-block;
  list-style:none;
  padding:7px 14px;
}

【讨论】：

【解决方案4】：

我们可以使用另一个div 元素来使导航 div 居中。有很多方法可以做到这一点，CSS Grid 和 Flexbox 在这种情况下会很好用，但我已经为您提供了一些与您已经编写的现有 CSS 样式保持一致的代码。

我留下了几种背景颜色，纯粹是为了直观地向您展示每个 div 发生的情况，您可以在满意时删除这些行：

HTML：

<div class="nav-wrapper">
  <div class="navigation">
    <p>Pg1</p> <p>Pg2</p> <p>Pg3</p> <p>Pg4</p> <p>Ph5</p>
  </div>
</div>

CSS：

.nav-wrapper {
  width: 100%;
  background: green;
  text-align: center;
}
.navigation {
  background: red;
  display: inline-block;
}

p {
  font-family: 'Roboto', serif;
  font-size: 1.5vh;
  text-align: center;
  padding-left: 1vw;
  padding-top: 0vw;
  padding-bottom: 0vw;
  float:left;
  color: #000000;
  line-height: 0em;
}

在 JSBin 上： http://jsbin.com/xiwanegohi/1/edit?html,css,output

【讨论】：