Question

我正在开发移动响应式设计，而且我遇到了需要在圆圈中间显示文字的地方。文本将从数据库中提取，因此文本有时可能很短或很长。我需要这个文本从内圈的中间开始，如果有多行文本，让文本向上。为方便起见，我制作了一个JSFille。我在CSS中的#child似乎不会影响它应用的div。如果有一个Javascript解决方案，也将不胜感激。谢谢。

JSFiddle

*{
  box-sizing:border-box;
}
.theCircle{
  width:84vw;
  height:84vw;
  border:0.5vw solid black;
  margin:auto;
  border-radius:42vw;
  position:relative;
}
.innerCircle{
  width:62vw;
  height:62vw;
  border:0.5vw solid black;
  margin:auto;
  border-radius:31vw;
  position:absolute;
  top:10.5vw;
  left:10.5vw;
}
.bubble {
position: absolute;
width: 30vw;
height: 10vw;
left: 25vw;

border: 1px solid gray;
border-radius: 20vw;
background-color: #e0e0eb;



}
#bName{


position: relative;

top:2vw ;
left: auto;
font-size: 6vw;
border: 1px solid black;
text-align: center;
word-wrap:break-word
}

#child {position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;}

<div class="theCircle">
                                
                                <div class="bubble"> text inside the bubble</div>
  <div class="innerCircle">  
  <div id="bName"><div id="child">I need this to start in the middle of the circle, and to go upwards when there is a lot of text like this </div></div>

Answer 1

你可以通过使用CSS3 flexbox属性来解决这个问题，那里有很多关于flexbox在线的文档，非常棒！

检查此编辑过的JSFiddle https://jsfiddle.net/2orwnfxv/3/

你只需要通过添加display：flex;使你的内圈成为一个flexbox容器;然后你继续以一切为中心

'use strict';


var DropDown = window.DropDown;

var HelloMessage = React.createClass({
  render: function () {
    return (
        <div>
            <h1>Hello {this.props.message}!</h1>
            <DropDown />
        </div>
    );
  }
});

ReactDOM.render(<HelloMessage message="World" />, document.getElementById('root'));

这很容易。希望有所帮助！

Answer 2

而不是摆弄位置。我猜显示：这里的flex会是一个很好的方法

检查此代码段

＆＃13;

* {
  box-sizing: border-box;
}
.theCircle {
  width: 84vw;
  height: 84vw;
  border: 0.5vw solid black;
  border-radius: 42vw;
  display: flex;
  justify-content: center;
}
.innerCircle {
  width: 62vw;
  height: 62vw;
  border: 0.5vw solid black;
  display: flex;
  margin: auto;
  justify-content: center;
  align-items: center;
  border-radius: 31vw;
}
.bubble {
  position: absolute;
  width: 30vw;
  height: 10vw;
  left: 25vw;
  border: 1px solid gray;
  border-radius: 20vw;
  background-color: #e0e0eb;
}
#bName {
  word-wrap: break-word
}
#child {
  width: 50%;
  height: 30%;
  margin: auto;
}

＆＃13;

<div class="theCircle">
  <div class="bubble">text inside the bubble</div>
  <div class="innerCircle">
    <div id="bName">
      <div id="child">I need this to start in the middle of the circle, and to go upwards when there is a lot of text like this</div>
    </div>
  </div>
</div>

＆＃13;

检查此codepen参考this

希望这有帮助

垂直文本对齐并填充其容器

2 个答案: