Question

想象星星*在div内部居中

                           textAlignRight * text AlignLeft

这基本上就是我想要实现的目标

<center>
  <span class="left_host">Right aligned</span>
  *
  <span class="right_host">Left aligned</span>
</center>

任何帮助解决这个问题都会很棒

谢谢

Answer 1

这就是我在结构上这样做的方式：

＆＃13;

div {
  display: inline-block;
  padding: 10px;
  vertical-align: middle;
}
.left {
  text-align: right;
}
.center {
  text-align: center;
  width: 110px;
}
.right {
  text-align: left;
}
.left,
.right {
  width: 200px;
}
.container {
  text-align: center;
  min-width: 580px;
}

＆＃13;

<div class="container">
  <div class="left">This text will be aligned right but appear on the left of stuff that you want to put in the center of all this madness.</div>
  <div class="center">* This will be centered. *</div>
  <div class="right">This text will be aligned left but appear on the right of stuff that you want to put in the center of all this madness.</div>
</div>

＆＃13;

http://jsfiddle.net/zn2uafm3/

Answer 2

HTML：

<div class="wrap">
    <div class="right">text aligned to the right</div>
    <div class="star">&#9733;</div> 
    <div class="left">text aligned to the left</div> 
</div>

CSS：

body
{
    text-align: center;
}

.wrap
{
    display: inline-block;
    background: #eee;
}

.wrap > div
{
    float: left;
    padding: 10px 5px;
}

.right
{
    text-align: right;
    direction: rtl;
}

.left
{
    text-align: left;
}

我在实例中添加了按钮，让您了解更多内容动态追加时会发生什么：http://jsfiddle.net/wqsb38jr/1/

文本在div的中心左右对齐

2 个答案: