Question

我对编码完全陌生，所以我提前为这个问题道歉。我正在尝试将图像集中对齐固定导航菜单的右侧。

这是我现在的代码：

HTML：

ul {
        list-style-type: none;
        float: left;
        position: relative;
        margin: 0;
        padding: 0;
    }
     li {
        padding: 3px;
        margin-bottom: 8px;
        background-color: #33b5e5;
        color: #ffffff;
       font-family: "Courier";
    }
    div.image{
           display: block;
        display: inline-block;
          float: left;
    }

 <nav>
        <ul>
           <li><a href="sam/index.html">about</a></li>
            <li><a href="cv/index.html">cv</a></li>
            <li><a href="adventures/index.html">adventures</a></li>
            <li><a href="books/index.html">books</a></li>
            <li><a href="blog/index.html">blog</a></li>
            <li><a href="quotes/index.html">quotes</a></li>         
            <li><a href="contact/index.html">contact</a></li>
     </ul>
    </nav>
    <div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>

我希望导航菜单固定在左侧，图像位于导航菜单右侧但位于页面的中心。这是我现在所拥有的图像：current homepage。如何将图像放在页面中央？

谢谢！

Answer 1

如果您正在尝试整个中心，那么您的nav和div.image应该是inline-block并排显示它们。然后，您应该将该批次放在一个可以集中的包装中：

＆＃13;

section {text-align:center}
nav,
div.image {
    display: inline-block;
    vertical-align:middle;
}
ul {
    list-style-type: none;
    position: relative;
    margin: 0;
    padding: 0;
    text-align:left;
}
 li {
    padding: 3px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
   font-family: "Courier";
}

＆＃13;

<section>
<nav>
    <ul>
       <li><a href="sam/index.html">about</a></li>
        <li><a href="cv/index.html">cv</a></li>
        <li><a href="adventures/index.html">adventures</a></li>
        <li><a href="books/index.html">books</a></li>
        <li><a href="blog/index.html">blog</a></li>
        <li><a href="quotes/index.html">quotes</a></li>         
        <li><a href="contact/index.html">contact</a></li>
 </ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
<section>

＆＃13;

更新...

现在我更好地了解你的目标（左侧导航，图像居中于右侧的剩余空间）似乎flex-box是最简单的解决方案：

＆＃13;

section {
  display:flex;
  justify-content: space-between;
  align-items: flex-start;
}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:left;
}
 li {
    padding: 3px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
   font-family: "Courier";
}

＆＃13;

<section>
<nav>
    <ul>
       <li><a href="sam/index.html">about</a></li>
        <li><a href="cv/index.html">cv</a></li>
        <li><a href="adventures/index.html">adventures</a></li>
        <li><a href="books/index.html">books</a></li>
        <li><a href="blog/index.html">blog</a></li>
        <li><a href="quotes/index.html">quotes</a></li>         
        <li><a href="contact/index.html">contact</a></li>
 </ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
<section>

＆＃13;

尝试3 ...

根据你的评论（fyi，你真的应该更加努力地解释你的要求）听起来你想要的是使图像居中而不管导航的位置。在以下示例中，我使用margin:auto将.image和position:absolute置于中心以修复左上角的导航。现在图像居中但导航可能会重叠，具体取决于视口宽度。

＆＃13;

nav {display:block; position:absolute;}
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align:left;
}
 li {
    padding: 3px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
   font-family: "Courier";
}
.image {display:block; width:450px; margin:auto;}

＆＃13;

<nav>
    <ul>
       <li><a href="sam/index.html">about</a></li>
        <li><a href="cv/index.html">cv</a></li>
        <li><a href="adventures/index.html">adventures</a></li>
        <li><a href="books/index.html">books</a></li>
        <li><a href="blog/index.html">blog</a></li>
        <li><a href="quotes/index.html">quotes</a></li>         
        <li><a href="contact/index.html">contact</a></li>
 </ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>

＆＃13;

Answer 2

你可以使用你的div类，如果类不起作用，那么使用id作为div，如id =＆＃34; image＆＃34;

＆＃13;

	
  
@media All and (max-width: 641px) {
   ul {
    list-style-type: none;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}
 li {
    padding: 3px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
   font-family: "Courier";
}
div.image{
 
      padding-top: 25%;
    margin-left: 16%;
}
}
@media screen and (min-width: 641px) and (max-width: 800px) {
 ul {
    list-style-type: none;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}
 li {
    padding: 3px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
   font-family: "Courier";
}
div.image{
 
          padding-top: 23%;
    margin-left: 21%;
}
}
@media screen and (min-width: 801px) and (max-width: 1024px) {
 ul {
    list-style-type: none;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}
 li {
    padding: 3px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
   font-family: "Courier";
}
div.image{
       padding-top: 18%;
    margin-left: 24%;
}
}
@media screen and (min-width: 1025px){
 
ul {
    list-style-type: none;
    float: left;
    position: relative;
    margin: 0;
    padding: 0;
}
 li {
    padding: 3px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
   font-family: "Courier";
}
div.image{
padding-top: 13%;
    margin-left: 30%;
}


}
}

＆＃13;

<nav>
    <ul>
       <li><a href="sam/index.html">about</a></li>
        <li><a href="cv/index.html">cv</a></li>
        <li><a href="adventures/index.html">adventures</a></li>
        <li><a href="books/index.html">books</a></li>
        <li><a href="blog/index.html">blog</a></li>
        <li><a href="quotes/index.html">quotes</a></li>         
        <li><a href="contact/index.html">contact</a></li>
 </ul>
</nav>
<div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>

＆＃13;

Answer 3

请检查我为您创建的代码

.image{
  display: block;
 text-align: center;
}

.image > img{
  background-color: red;
}

您还可以在此链接中查看确切代码http://codepen.io/myco27/pen/dNxWWK

Answer 4

您可以将img元素放入nav并使用nav添加display:flex, justify-content: space-between样式。请参阅代码段

ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}
 li {
    padding: 3px;
    margin-bottom: 8px;
    background-color: #33b5e5;
    color: #ffffff;
    font-family: "Courier";
}
nav {
  display: flex;
  justify-content: space-between;
}

<nav>
    <ul>
       <li><a href="sam/index.html">about</a></li>
        <li><a href="cv/index.html">cv</a></li>
        <li><a href="adventures/index.html">adventures</a></li>
        <li><a href="books/index.html">books</a></li>
        <li><a href="blog/index.html">blog</a></li>
        <li><a href="quotes/index.html">quotes</a></li>         
        <li><a href="contact/index.html">contact</a></li>
 </ul>
  <div class="image"><img src="vietnam.jpg" alt="" width="450" height="350" /></div>
</nav>

如何将图像置于html / css导航栏右侧？

4 个答案:

更新...

尝试3 ...