Question

我是一个使用CSS3的初学者，我试图将包含SVG对象的li标签居中。

我希望SVG对象显示为居中，而其他li标签向左和向右浮动。

此外，SVG对象比其他li大，我想对齐所有li，因此SVG的底部与其他li的高度相同。

有关如何操作的提示吗？

谢谢！

＆＃13;

* {
    margin: 0;
    padding: 0;
}

 .container {
    position: relative;
    background-color: red;
    height: 200px;
}

ul {
    list-style: none;
    background-color: red;
    position: absolute;
    bottom: 0;
    width: 100%;
}

ul li {
    background-color: yellow;
    display: inline-block;
    float: right;
}

ul li:first-child {
    float: left;
}

ul li.svg {
    float: center;
}

＆＃13;

<div class="container">
    <ul>
        <li>Title</li>
        <li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Project</a></li>
        </ul>
</div>

＆＃13;

Answer 1

如何定位对象#svg？

Answer 2

尝试text-align: center;包含li标记。适用于Safari和Chrome。

Answer 3

我试图取消SVG对象，看起来我甚至无法让li标签居中：

* {
    margin: 0;
    padding: 0;
}

 .container {
    position: relative;
    background-color: red;
    height: 200px;
}

ul {
    list-style: none;
    background-color: red;
    position: absolute;
    bottom: 0;
    width: 100%;
}

ul li {
    background-color: yellow;
    display: inline-block;
    float: right;
}

ul li:first-child {
    float: left;
}

ul li.svg {
    float: center;
    text-align: center;
}

<div class="container">
    <ul>
        <li>Title</li>
        <li class="svg">Example</li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Project</a></li>
        </ul>
</div>

Answer 4

为此您只需将此代码添加到您的css

即可

ul li.svg {
    text-align: center;
}

很简单。但我看到你使用不正确的值“浮动”

float:center ;

在css float中可以

float:right;

或

float :left;

希望这可以提供帮助

Answer 5

尝试使用＆＃34;标题＆＃34; （第一项）浮动在左侧，所有通用项目在右侧，由于边距宽达2列通过将line-height固定为1.5和后者的倍数，列具有相似但不相等的高度。这意味着您必须通过此快速解决方案知道设置标题高度的项目数。

Codepen：http://codepen.io/PhilippeVay/pen/ORqQoo

关于语义的注意事项： title 应该是此列表之前的h1-h6元素。如果你以前在你的页面上有一个h1，那么它就是h2，后面跟着那个列表。

＆＃13;

/* (Codepen normalize and Autoprefixer are ON) */
 .container {
position: relative;
background-color: red;
min-height: 200px;
}
ul {
list-style: none;
width: 100%;
padding-left: 0;
}
li {
  width: 33.33%;
}
li:nth-child(n+3) {
  margin-left: 66.67%;
  line-height: 1.5;
  background-color: yellow;
}
li:first-child {
  float: left;
  line-height: 4.5;
  text-align: center;
  background-color: tomato;
}
li.svg {
  float: left;
  vertical-align: top;
  background-color: lightblue;
}

＆＃13;

<div class="container">
    <ul>
        <li>Title</li>
        <li class="svg"><object id="svg" type="image/svg+xml" data="https://la-cascade.io/content/images/2015/06/kiwi.svg" width="20%"></object></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Project</a></li>
        <li><a href="#">Project</a></li>
        </ul>
</div>

＆＃13;

将<object>标记置于<li>中

5 个答案: