时间戳

首页 > 解决方案 > ReactJS：如何将浮动元素 -textB- 和初始放置的文本 -textA- 放在同一基线上？

css - ReactJS：如何将浮动元素 -textB- 和初始放置的文本 -textA- 放在同一基线上？

问题描述

这里是演示：https ://stackblitz.com/edit/react-i8c9en

我希望这两个文本位于同一基线上。我曾尝试使用垂直对齐和其他属性，但到目前为止我未能实现相同基线的渲染。

class App extends React.Component { 
  render() {
    return (
      <div className="component">
        <h3 
          className="text_a"
        >
          textA{" "} 
          <span className="text_b">
            textB
          </span> 
        </h3>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));
.component {
  text-align: center;
  padding: 50px;
}

.text_a {
  font-size: 5em;
}

.text_b {
  /* width:100%; */
  float: right;
  /* position:absolute; */
  right: 3vw;
  /* margin-right:5vw; */
  /* margin-top:7.5vh; */
  /* position:relative; */
  /* float:right;
    clear:both; */
  /* padding-right:10vw; */
  /* vertical-align:middle; */
  font-size: 0.60em;
  color: rgb(54, 0, 18);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

标签： cssreactjs

解决方案

您可以使用 flex 并将项目与基线对齐。

.text_a{
  display: flex;
  align-items: baseline;
  font-size:5em;
}

vertical-align不适用于块样式元素。以下是有关此的其他信息：https ://christopheraue.net/design/vertical-align

编辑： 再看一下您的代码，这些元素应该已使用其默认样式与基线对齐。您仍然可以使用 flex，但只需删除 flexfloat也可以。

.text_a {
  font-size: 5em;
}

.text_b {
  font-size: 0.60em;
  color: rgb(54, 0, 18);
}

推荐阅读