CODEWITHSUNDEEP
htmlcss
Saraband
Saraband

Reputation: 1590

Centering a <object> tag inside a <li>

I'm kind of a beginner using CSS3 and I'm trying to center a li tag that contains a SVG object.

I want the SVG object to appear centered while the other li tags float to the left and right.

Also, the SVG object is bigger than the other li, I'd like to align all the li so the bottom of the SVG is at the same height as the other li.

Any tips on how to do that ?

Thanks !

* {
    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;
}
<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>

Upvotes: 1

Views: 339

Answers (5)

FelipeAls
FelipeAls

Reputation: 22171

Here's a try with "title" (the first item) floating on left and all generic items on right, due to a margin-left as wide as 2 columns.
Columns have similar but not equal heights by fixing line-height to 1.5 and a multiple of latter. That means you must know the number of items to set height of title with this quick solution.

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

Note on semantics: a title should be a h1-h6 element just before this list. If you had previously on your page a h1, than it would be a h2 followed by that list.

/* (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;
}
<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>

Upvotes: 0

Farhad Azarbarzinniaz
Farhad Azarbarzinniaz

Reputation: 739

for this you can simply add this code to your css 

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

very simple . but i seen you use incorrect value for "float"

float:center ;

in css float can be 

float:right;

or 

float :left;

hope this can help

Upvotes: 0

Saraband
Saraband

Reputation: 1590

I tried to take off the SVG object and it looks like I can't even get the li tag to be centered:

* {
    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>

Upvotes: 0

dijipiji
dijipiji

Reputation: 3109

How about targeting the object #svg ?

Upvotes: 1

clemens
clemens

Reputation: 17722

Try a text-align: center; for the containing li tag. Works in Safari and Chrome.

Upvotes: 0

Related Questions