Question

我有一个无序列表，中心列表项中有一个徽标图像。徽标两侧的每个列表项具有不同的宽度。

ul为100％，应用了对齐中心。

我试图找到一种方式，使徽标li完全位于页面的中心位置，理想情况下只需使用CSS。

有没有人知道如何实现这一目标？

SELECT  spr1.SU_URS_ID,count(spr1.SU_URS_ID) 
FROM    overstappen.spr_usr spr1 
WHERE   spr1.SU_URS_ID in ( 
            SELECT  spr.SU_URS_ID 
            FROM    overstappen.spr_usr spr 
            WHERE   spr.SU_SPR_ID =40) 
GROUP BY spr1.SU_URS_ID
HAVING COUNT(spr1.SU_URS_ID) = 1;

这将是它的输出方式：

Answer 1

这实际上并不那么难。看一下css：

ul {
    width: 100%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}
li {
    float: left;
    width: 14.285714286%;
    line-height: 150px;
    text-align: center;
    margin: 0;
    padding: 0;
}

以下是codepen的链接。

Answer 2

我将它拆分为两个单独的列表，并将图像移出列表。左右两侧浮动，并在每侧施加衬垫，以便有足够的间隙用于图像。然后绝对将图像定位到中心并使用变换 hack 来确保它是死点。您可以增加填充量以使文本远离图像。

http://jsfiddle.net/g1dggym7/1/

body {
    width:100%;
    margin:0;
    padding:0;
}
ul {
    list-style:none;
    width:100%;
    margin:0;
    padding:0;
    display:block;
    float:left;
    width:50%;
    box-sizing:border-box; /* Make padding be inclusive of width */
}
ul.l {
    text-align:right;
    padding-right:175px; /* Half image width */
}
ul.r {
    padding-left:175px;  /* Half image width */
}
ul li {
    display:inline-block;
    line-height:150px; /* Height of the image */
}
section {
    width:100%;
    position:relative;
}
section img {
    width:350px;
    position:absolute;
    top:0;
    left:50%;
    transform: translateX(-50%);
}

<section>
    <ul class="l">
        <li>Dummy</li>
        <li>Lorem Ipsum</li>
        <li>Dolor Sit</li>
    </ul>
    <ul class="r">
        <li>Nar Harbet</li>
        <li>Test</li>
        <li>Text</li>
    </ul>
    <img src="http://placehold.it/350x150" />
</section>

值得注意的是，如果文本最终分成两行，它看起来很糟糕，所以如果你还没有，你可能想要一些小屏幕宽度的媒体查询。

Answer 3

这假设您可以更改HTML（添加类）并知道徽标的宽度（假设此示例为100px）。

HTML

<ul>
    <li class="left">Dummy</li>
    <li class="left">Dummy</li>
    <li class="left">Dummy</li>
    <li class="logo"><img src="logo.jpg" />
    <li class="right">Dummy</li>
    <li class="right">Dummy</li>
    <li class="right">Dummy</li>  
</ul>

CSS

ul{
    list-style-type:none;
    margin:0;
    padding:0;
    position:relative;
}

ul:before, ul:after{
    content:"";
    display:table;
}

ul:after{
   clear:both;
}

li{
   max-width:14.28%;
}

li.left{
   float:left;
}

li.right{
   float:right;
}

li.logo{
   position:absolute;
   top:0;
   left:50%;
   margin-left:-50px;
   width:100px;
}

最大宽度为14.28％（100％的1/7，因为有7个项目。）

Answer 4

使用 CSS exclusions ，有一种方法可以使用纯CSS执行此操作但是browser support is very lacking，只有IE 10+（!!!）支持

通过在图像上设置以下类，我们可以模仿一种浮动：图像中心效果

.exclusion {
  -ms-wrap-flow: both; /* apply exclusion to img */
  position: absolute; 
  right: 0; /* center the img */
  left: 0; /* center the img */
  margin: auto; /* center the img */
}

使用IE 10 +

查看this fiddle

ul {
  list-style-type: none;
  text-align: center;
}
li {
  display: inline-block;
}
.exclusion {
  -ms-wrap-flow: both;
  position: absolute;
  right: 0;
  left: 0;
  margin: auto;
}

<ul>
  <li>Dummy1</li>
  <li>This is some long dummy2 text!!!</li>
  <li>Dummy3</li>
  <li>
    <img class="exclusion" src="http://placehold.it/300x100" />
  </li>
  <li>Dummy4</li>
  <li>Dummy5</li>
  <li>Dummy6</li>
</ul>

Answer 5

如果您根本不想改变任何HTML，可以使用nth-child方法。

＆＃13;

body {
    width:100%;
    margin:0;
    padding:0;
}
ul {
    list-style:none;
    width:100%;
    margin:0;
    padding:0;
    display:block;
    text-align:center;
    position:relative;
    box-sizing:border-box;
}
ul li {
    display:inline-block;
    line-height:150px;
}
ul li:nth-child(-n+3) {
    position:relative;
    right:215px;
}
ul li:nth-child(n+5) {
    position:relative;
    left:145px;
}
ul li:nth-child(4) {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

＆＃13;

<ul>
    <li>Dummy</li>
    <li>Lorem Ipsum</li>
    <li>Dolor Sit</li>
    <li>
        <img src="http://placehold.it/350x150" />
    </li>
    <li>Nar Harbet</li>
    <li>Test</li>
    <li>Text</li>
</ul>

＆＃13;

此方法的警告是，如果文本数量发生更改，并且添加或删除left，则需要更改right和li值那么您需要更改nth-child编号。

当项目具有不同宽度时，中间项目直接居中

5 个答案:

使用IE 10 +