调整ballon div中的内容

Question

.ballon {
    display:block;
    width: 60%;
    height:300px;
    background-color: red;
    -webkit-border-radius: 63px 63px 63px 63px / 72px 72px 108px 108px;
    border-radius:         50%  50%  50%  50%  / 40%   40%   60%  60%;
    text-align: center;
}

如何将气球中的文字居中而不是留下气球？

如何在气球后添加一个小三角形？

jsFiddle

Answer 1

你想要这样的东西吗？

.ballon {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  width: 60%;
  height: 300px;
  padding: 50px 100px;
  background-color: red;
  -webkit-border-radius: 63px 63px 63px 63px / 72px 72px 108px 108px;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  text-align: center;
}

.col-md-4 + .col-md-4 { /* add some space between the columns */
  margin-top: 30px;
}

.ballon:after { /* here we create the triangle */
  content: "";
  position: absolute;
  bottom: -20px;
  border-color: transparent transparent black;
  border-style: solid;
  border-width: 20px 8px;
  height: 0;
  width: 0;
  z-index: 1;
}

.ballon > h2 {
  margin: 0;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
  <div class="col-md-4">
  
  <div class="ballon"><h2>Test large content in ballon</h2></div>
  
  </div>
  <div class="col-md-4">
  
  <div class="ballon"><h2>Test large content in ballon</h2></div>

  </div>
  <div class="col-md-4">
  
  <div class="ballon"><h2>Test large content in ballon</h2></div>
  
  </div>
</div>

我正在使用flexbox模型来对齐内容。您可以在此处阅读有关flexbox的更多信息：flexbox guide。

你可以在这里玩弄分叉小提琴：jsfiddle

我希望这会对你有所帮助。否则，您可能会更详细地告诉我您想要实现的目标（即使是边缘情况）。

修改
我已在我的解决方案中编辑了代码段，并更新了jsfiddle。

您可以在此处找到有关三角形的一些有用信息：css-triangles。如果您不想手动执行此操作，请查看triangle generator：

Answer 2

尝试文本是，在css文件中执行所有这些代码 添加位置：相对;分类气球 并在css文件中添加此项 h2{position:absolute;top:40%;left:20px;}