Question

我正在尝试将多个文本彼此相邻并以页面为中心。它们当前显示在左侧，除非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篇文章集中在一起？

Answer 1

由于您的.navigation-container是inline-block元素，因此您需要将text-align:center用于其父元素。在代码段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>

display: flex;

Answer 2

您可以使用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>

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Login from './src/Components/Login/Login.js'
import {StackNavigator, TabNavigator} from 'react-navigation'
import Signup from './src/Components/Signup/Signup.js'
import Router from './src/Components/BodyPages/Router.js'
import Form from './src/Components/Form/Form.js'

const RootStack = StackNavigator(
 {
   Home: {
     screen: Login,
   },
   Signup: {
     screen: Signup,
   },
   Router: {
     screen: Router,
   },
 },
 {
   initialRouteName: 'Home',
   headerMode:'none',
 }
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

Answer 3

我们可以使用另一个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

Answer 4

以下是您需要的工作示例。使用列表而不是段落，它不会破坏行，你不会需要添加许多奇怪的样式。

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 个答案: