Question

我一直试图让两个

元素在页面中间居中。元素必须在同一行。

这是HTML：

<div class="paragraph-wrapper">
    <p class="white-text">Foo? </p><p class="orange-text">Bar.</p>
</div>

这是CSS：

.paragraph-wrapper p {
    text-align: center;
    display: inline-block;
}

p.white-text {
    color: white
}

p.orange-text {
    color: orange;
}

Answer 1

将text-align: center;属性应用于.paragraph-wrapper，而不是应用于p-tag：

＆＃13;

.paragraph-wrapper {
    text-align: center;
    background-color: #000;
}
.paragraph-wrapper p {
    display: inline-block;
}

p.white-text {
    color: white
}

p.orange-text {
    color: orange;
}

＆＃13;

<div class="paragraph-wrapper">
    <p class="white-text">Foo? </p><p class="orange-text">Bar.</p>
</div>

＆＃13;

Answer 2

如果需要，可以使用flexbox：

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

import { Textbox } from './src/Textbox';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text>Hello Hector. Open up App.js to start working on your app!</Text>
        <Text>Changes you make will automatically reload.</Text>
        <Text>Shake your phone to open the developer menu.</Text>
      </View>
    );
  }
};

export class Textbox extends Component ({
  render () {
    return (
      <View style={styles.useless}> 
        <Textbox />
      </View>
    );
  },
});

Answer 3

您的示例中的父级需要text-align: center

.paragraph-wrapper {
  text-align: center;
}

.paragraph-wrapper p {
  display: inline-block;
}

p.white-text {
  color: green;
}

p.orange-text {
  color: orange;
}

<div class="paragraph-wrapper">
    <p class="white-text">Foo? </p><p class="orange-text">Bar.</p>
</div>

CSS，在身体上居中两个<p>元素（在同一行）

3 个答案: