Question

我有一个垂直菜单，其中每个项目都是居中。这是通过ul / li完成的。

我希望每个项目都有一个可重复的背景图片，它在左侧对齐，但与右侧的内部文字宽度对齐。

以下是我想要做的事情的说明： illustration as an image

当然，可以将DIV添加到HTML结构中。

由于

Answer 1

这似乎不可能单独使用CSS。所以我继续用jQuery创建它。

HTML

<ul>
    <li><span class="center">Text</span></li>
    <li><span class="center">Text big</span></li>
    <li><span class="center">Text small</span></li>
</ul>

我用脚本做的就是这个。

$('li .center').each(function() {
    var width = $(this).width();
    $(this).css({"paddingLeft": (200 - width)/2 + 'px'});
});

我添加了fiddle作为参考。

我希望您在.center

添加背景图片而不是＃666时不会遇到问题

Answer 2

可以使用span和伪元素

Codepen Demo

<强> HTML

<div class="wrapper"> /* not required */
  <ul>
    <li class="center"><span>Some Long Text</span></li>
    <li class="center"><span>Some Text</span></li>
    <li class="center"><span>Text</span></li>
  </ul>
</div>

<强> CSS

ul {
  padding: 0;
  margin: 0;
}

/* THE GOOD STUFF */ 

li{
  overflow:hidden; /* hides all extra pixels */
  font-size:2em;
  padding: 0;
  margin-bottom:.5em;
}

.center {
  text-align:center;
}

li > span {
  diaplay:inline-block;
  background:red; 
  position:relative;
  padding-right:0.5em;
}

li.center > span:before {
  content: "";
  position: absolute;
  right:100%;
  top: 0;
  height:100%; 
  width:2000px; /* some really large number*/
  background:red;
  margin-right:0; /* or remove and add padding-right to span */
}

CSS背景在居中文本上左对齐

2 个答案: