发表新帖
发表新帖

How to vertically align
  • elements in
      ?

    • 前端 未结
    关注
    4 1219
    慢半拍i
    慢半拍i 2020-11-28 05:09

    I have a horizontal

      and I need to center each
    • in it vertically. My markup is below. Each
    • has a border
    相关标签:
    4条回答
    • 一向
      2020-11-28 05:32

      I assume that since you're using an XML declaration, you're not worrying about IE or older browsers.

      So you can use display:table-cell and display:table-row like so:

      <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        .toolbar ul {
            display:table-row;
        }
        .toolbar ul li
        {
            display: table-cell;
            height: 100px;
            list-style-type: none;
            margin: 10px;
            vertical-align: middle;
        }
        .toolbar ul li a {
            display:table-cell;
            vertical-align: middle;
            height:100px;
            border: solid 1px black;
        }
        .toolbar ul li.button a {
            height:50px;
            border: solid 1px black;
        }
    </style>
</head>
<body>
    <div class="toolbar">
        <ul>
            <li><a href="#">first item<br />
                first item<br />
                first item</a></li>
            <li><a href="#">second item</a></li>
            <li><a href="#">last item</a></li>
            <li class="button"><a href="#">button<br />
                button</a></li>
        </ul>
    </div>
</body>
</html>
      0 讨论(0)
    • 遥遥无期
      2020-11-28 05:32

      You can use flexbox for this.

      ul {
    display: flex;
    align-items: center;
}

      A detailed explanation of how to use flexbox can be found here.

      0 讨论(0)
    • 北恋
      2020-11-28 05:45

      I had the same problem. Try this.

      <nav>
    <ul>
        <li><a href="#">AnaSayfa</a></li>
        <li><a href="#">Hakkımızda</a></li>
        <li><a href="#">İletişim</a></li>
    </ul>
</nav>

      @charset "utf-8";

nav {
    background-color: #9900CC;
    height: 80px;
    width: 400px;
}

ul {
    list-style: none;
    float: right;
    margin: 0;
}

li {
    float: left;
    width: 100px;
    line-height: 80px;
    vertical-align: middle;
    text-align: center;
    margin: 0;
}

nav li a {
    width: 100px;
    text-decoration: none;
    color: #FFFFFF;
}
      0 讨论(0)
    • 深忆病人
      2020-11-28 05:51

      Here's a good one:

      Set line-height equal to whatever the height is; works like a charm!

      E.g:

      li {
    height: 30px;
    line-height: 30px;
}
      0 讨论(0)
     看不清?
    提交回复
    热议问题