CSS：样式图像列表项

Question

我有一个导航列表，我正试图将列表项中的图像向下移动

nav ul {
  margin-top: 30px;
  text-align: center;
  color: #006540;
  font-weight: 700;
  font-size: 19px;
}
li {
  display: inline;
  padding: 50px;
}

<div class="container">
    <div class="row">
      <nav>
        <ul>
          <li>History</li>
          <li>Locations</li>
          <a href="_index.cfm">
      <img src="images/GeorgesLogo.png" border="0" width:"184px" height:"120px">
    </a>
          <li>Menu</li>
          <li>Contact</li>
        </ul>
      </nav>
    </div>
  </div>

非常感谢！

Answer 1

我想你正在找这个。

nav ul {
    color: #006540;
    display: table;
    font-size: 19px;
    font-weight: 700;
    margin: 30px auto 0;
    text-align: center;
    width: 66%;
    padding:0;
}
    li {
     display:table-cell;
      padding: 50px;
      vertical-align:middle;
      /*vertical-align: baseline;*/
    }
    li.logo {
     padding:10px;
    }

<div class="container">
    <div class="row">
      <nav>
        <ul>
          <li>History</li>
          <li>Locations</li>
          <li class="logo">
           <a href="_index.cfm">
            <img src="https://encrypted-tbn1.gstatic.com/images?q=tbn:ANd9GcRDxhstd1LjI9XYiMQYPnVJkLURJlWpq3kCt1_GfW1adHLYS7dPI52DSw" border="0" width:"184px" height:"120px">
           </a>
          </li>
          <li>Menu</li>
          <li>Contact</li>
        </ul>
      </nav>
    </div>
  </div>

希望对你有所帮助

Answer 2

您可以试试这个代码：

<div class="container">
<div class="row">
  <nav>
    <ul>
      <li>History</li>
      <li>Locations</li>
      <li class="image"><a href="_index.cfm">
  <img src="http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" border="0" width="100" height="100"></li>
</a>
      <li>Menu</li>
      <li>Contact</li>
    </ul>
  </nav>
</div>

<style> nav ul {  margin-top: 30px;  text-align: center;  color: #006540;  font-weight: 700;  font-size: 19px;} li {  display: inline;  padding: 50px;} .image{padding: 10px;    position: relative;    top: 35px;  }   </style>

Answer 3

<style> body {
   margin: 0;
   padding: 0;
   overflow: hidden;
 }
 div.header {
   padding: 5px 5px 2px 5px;
   margin: 0px;
   height: auto;
 }
 div {
   margin: 0px;
   padding: 00px 0px 0px 0px;
   width: 100%;
   background-color: #999999;
 }
 div.top {
   width: 100%;
   height: 80px;
   background-color: #CC9933;
 }
 div.top {
   text-align: center;
   vertical-align: baseline;
   margin: 0px;
   padding: 0px;
   font-family: Verdana, Geneva, sans-serif;
   font-size: 19px;
   color: #000000;
 }
 h3 {
   text-align: center;
   margin: 0px;
   padding: 0px;
   line-height: 1.22em;
 }
 .navgation {
   width: 100%;
   height: 300px;
   position: fixed;
   margin: 0px;
   padding: 0px;
   overflow: hidden;
 }
 nav ul {
   width: 100%;
   background-color: #FFFFFF;
 }
 ul {
   margin: 0px 0px 0px 0px;
   padding: 0px;
   overflow: hidden;
   text-align: center;
 }
 li {
   display: inline-block;
   float: left;
 }
 a {
   margin: 0px;
 }
 a:link,
 a:visited {
   display: block;
   font-weight: 700;
   font-family: Arial, Helvetica, sans-serif;
   font-size: 22px;
   color: #00663F;
   text-align: center;
   padding: 220px 88px 0px 88px;
   text-decoration: none;
   text-transform: capitalize;
 }
 a:hover,
 a:active {
   background-color: #FFFFFF;
 }
 </style>

<!DOCTYPE html>
<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
      overflow: hidden;
    }
    div.header {
      padding: 5px 5px 2px 5px;
      margin: 0px;
      height: auto;
    }
    div {
      margin: 0px;
      padding: 00px 0px 0px 0px;
      width: 100%;
      background-color: #999999;
    }
    div.top {
      width: 100%;
      height: 80px;
      background-color: #CC9933;
    }
    div.top {
      text-align: center;
      vertical-align: baseline;
      margin: 0px;
      padding: 0px;
      font-family: Verdana, Geneva, sans-serif;
      font-size: 19px;
      color: #000000;
    }
    h3 {
      text-align: center;
      margin: 0px;
      padding: 0px;
      line-height: 1.22em;
    }
    .navgation {
      width: 100%;
      height: 300px;
      position: fixed;
      margin: 0px;
      padding: 0px;
      overflow: hidden;
    }
    nav ul {
      width: 100%;
      background-color: #FFFFFF;
    }
    ul {
      margin: 0px 0px 0px 0px;
      padding: 0px;
      overflow: hidden;
      text-align: center;
    }
    li {
      display: inline-block;
      float: left;
    }
    a {
      margin: 0px;
    }
    a:link,
    a:visited {
      display: block;
      font-weight: 700;
      font-family: Arial, Helvetica, sans-serif;
      font-size: 22px;
      color: #00663F;
      text-align: center;
      padding: 220px 88px 0px 88px;
      text-decoration: none;
      text-transform: capitalize;
    }
    a:hover,
    a:active {
      background-color: #FFFFFF;
    }
  </style>
</head>

<body>
  <div class="header">
    <div class="top">
      <h3>This is top.</h3>
    </div>
    <div class="navgation">
      <nav>

        <ul>
          <li><a href="#home">History</a>
          </li>
          <li><a href="#news">Location</a>
          </li>
          <li>
            <img src="" width="258px" height="308px">
          </li>
          <li><a href="#contact">Menu</a>
          </li>
          <li><a href="#about">Contact</a>
          </li>
        </ul>

      </nav>
    </div>
  </div>
</body>

</html>

所以我亲爱的 "Eric Larson" 也许这会对你有所帮助。我特地为你制作它是因为我正在学习 css 这就是我特地为你制作它的原因，我很喜欢并希望这对你有所帮助。给出你的反馈。谢谢维维克卡纳

CSS：样式图像列表项

CSS: Style Image List Item

html

css

navigation

image