如何使图库居中

时间：2019-05-10 16:17:54

标签： html css

我需要在使图像中心居中时需要帮助，我无法使其按我的意愿工作，装订线正在困扰着屁股，因此正在计算边距和宽度。我希望图像居中，因此每行三幅图像，其中一幅图像一直居左，第二幅图像居中，第三幅图像一直居右，分别使用边距和浮点填充，我认为这是一种不好的做法，必须有一种更好的方法来做到这一点。每个图像的宽度均为295px，我在photoshop中更改了宽度。我不希望使用CSS网格，flexbox等……我只是想以基本方式使用浮点数和盒子模型来做。如果有什么好方法可以使这些图像居中，并在它们之间留出一定的空间。 http://i67.tinypic.com/no8vih.jpg 

/* CSS Document */


/*body {
	margin: 20px 250px;
}*/

#wrapper {
  width: 1000px;
  margin: 20px auto;
}

header {
  background-image: url("../Images/view2.jpg");
  background-repeat: no-repeat;
  text-align: center;
  padding-top: 30px;
  padding-bottom: 20px;
}

header #navbar {
  margin-top: 35px;
}

#navbar a {
  padding: 30px 35px;
}

header h1 {
  margin: 0;
}

main {
  background: rgba(211, 204, 38, 1.00);
  overflow: hidden;
  padding: 20px;
}

main #page {
  text-align: center;
}

main #inner-content ul {
  list-style: none;
}

main #inner-content {
  overflow: hidden;
  padding-left: 17.7px;
}

main #inner-content #block1 {
  float: left;
  padding: 0;
  width: 33.33%;
}

main #inner-content #block2 {
  float: left;
  padding: 0;
  width: 33.33%;
}

main #inner-content #block3 {
  float: left;
  padding: 0;
  width: 33.33%;
}

main #inner-content #block1 li {
  margin-left: 12.5px;
}

main #inner-content #block2 li {
  margin-left: 12.5px;
}

main #inner-content #block3 li {
  margin-left: 12.5px;
}

#about-text {
  margin-bottom: 50px;
  text-align: center;
}

footer {
  background: rgba(96, 96, 96, 1.00);
  padding: 20px;
  overflow: hidden;
  clear: left;
}

footer #contact {
  float: left;
  margin-left: 200px;
}

footer #form {
  float: right;
  margin-right: 200px;
}
<div id="wrapper">

  <header id="header">
    <h1>ISMAR PHOTOGRAPHY</h1>
    <nav id="navbar">
      <a href="#">HOME</a>
      <a href="#">ABOUT</a>
      <a href="#">SERVICES</a>
      <a href="#">CONTACT</a>
      <a href="#">PORTFOLIO</a>
    </nav>
  </header>

  <main>

    <p id="about-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil error aspernatur vitae illo animi aliquam perferendis dicta, temporibus, dolores suscipit accusantium cumque voluptas nesciunt pariatur numquam omnis quo sunt minus voluptatum vero odio
      ipsam mollitia. Itaque consequatur non harum molestias quibusdam voluptatem provident, eius, aliquam magnam, nesciunt ipsum est maiores! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed beatae veritatis provident expedita facere dolore
      saepe autem cupiditate voluptas assumenda enim odit illum et placeat amet officiis, accusamus adipisci veniam, hic. Velit fugiat vitae, laboriosam omnis voluptates rem, totam esse quisquam sunt hic voluptatum amet quam repudiandae sequi incidunt
      nam!</p>

    <p id="page">01</p>

    <div id="inner-content">

      <ul id="block1">
        <li><img src="Images/nature.jpg"></li>
        <li><img src="Images/panorama.jpg"></li>
        <li><img src="Images/self.jpg"></li>
      </ul>


      <ul id="block2">
        <li><img src="Images/self2.jpg"></li>
        <li><img src="Images/sky.jpg"></li>
        <li><img src="Images/telex.jpg"></li>
      </ul>

      <ul id="block3">
        <li><img src="Images/urban-beatz.jpg"></li>
        <li><img src="Images/urban-beatz2.jpg"></li>
        <li><img src="Images/view.jpg"></li>
      </ul>
    </div>


  </main>

  <footer>
    <div id="contact">
      <h2>CONTACT ME</h2>
      <p>randomemail@gmail.com</p>
      <p>+456 34 55 5567</p>
    </div>


    <form action="#" name="form" id="form">
      <label for="name">Name</label><br>
      <input type="text" id="name"><br>
      <label for="last-name">Last name</label><br>
      <input type="text" id="last-name"><br>
      <label for="email">Email</label><br>
      <input type="text" id="email"><br>
      <label for="message">Message</label><br>
      <input type="text" id="message"><br>
    </form>
  </footer>
</div>

4 个答案:

答案 0 :(得分：1)

好的，如果您不想使用grid或flexbox，那么我建议您使用旧的学校桌子是一个不错的选择。

.my-table {
  width: 100%;
}

.my-table td {
  /* Change this padding to add gutters of desirable size*/
  padding: 20px;
}

.my-table img {
  width: 100%;
  height: auto;
}
<table class="my-table">
  <tr>
    <td><img src="image_1_location.jpg" /></td>
    <td><img src="image_2_location.jpg" /></td>
    <td><img src="image_3_location.jpg" /></td>
  </tr>
  <tr>
    <td><img src="image_4_location.jpg" /></td>
    <td><img src="image_5_location.jpg" /></td>
    <td><img src="image_6_location.jpg" /></td>
  </tr>
</table>

选项2

如果需要，还有另一种方法可以使用浮点数实现。

唯一的是，您必须制作多个容器来容纳浮标。

这是您的操作方式

.my-image-gallery {
  position: relative;
}

.clearfix:after {
  content: " ";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

.floating-element {
  float: left;
  width: 33.33%;
}

.image-container {
  padding: 10px;
}

.image-container>img {
  width: 100%;
  height: auto;
}
<div class="my-image-gallery">
  <div id="row-1" class="clearfix">
    <!-- You'll need to make a container for each image -->
    <div class="floating-element">
      <div class="image-container">
        <img src="google-logo.png" />
      </div>
    </div>
    <div class="floating-element">
      <div class="image-container">
        <img src="google-logo.png" />
      </div>
    </div>
    <div class="floating-element">
      <div class="image-container">
        <img src="google-logo.png" />
      </div>
    </div>
  </div>
</div>

答案 1 :(得分：1)

虽然我认为这是一种很有趣的方法。您可以使用calc()在中心img的两侧添加边距，本示例使用的是当前没有弯曲的标记：

li:nth-child(2) {
  margin: 0 calc(50% - 408px);
}
li {
  width: 259px;
  height: 259px;
  list-style-type: none;
  background-color: lightblue;
  display: inline-block;
}

https://jsfiddle.net/DIRTY_SMITH/0f78ksvx/12/

您不想做的更好的方法是使用flex：

#block1{
    display: flex;
    justify-content: space-between;
}

https://jsfiddle.net/DIRTY_SMITH/0f78ksvx/3/

答案 2 :(得分：0)

下面是一些如何实现画廊的最小示例。 Flexbox和Float方法的概念相同。告诉每个图像，它应该是容器元素宽度（包括边距）的1/3，并允许图像包裹在其容器元素内。

在“删除” 的最外边距中使用的overflow和负边距属性可能不是您想要或关注的。

使用Flexbox 

body {
  margin: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  overflow: hidden;
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: -1rem;
  background-color: rgba( 111, 222, 50, 0.15);
}

.gallery img {
  display: flex;
  margin: 1rem;
  width: calc( 33.33333% - 2rem );
}
<div class="container">
  <div class="gallery">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/">
  </div>
</div>

使用浮动广告

我高度建议不要使用浮动控件，而应使用Flexbox或CSS Grid，除非浮动控件提供的特定行为满足某些要求。

body {
  margin: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  overflow: hidden;
}

.gallery {
  margin: -1rem;
  overflow: hidden;
  background-color: rgba( 111, 222, 50, 0.15 ); /* For illustrative purposes. */
}

.gallery img {
  float: left;
  margin: 1rem;
  max-width: calc( 33.33333% - 2rem); /* Subtract left and right margins */
}
<div class="container">
  <div class="gallery">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/">
  </div>
</div>

body {
  margin: 2rem;
}

.container {
  margin-left: auto;
  margin-right: auto;
  width: 75%;
  overflow: hidden;
}

.gallery {
  overflow: hidden; /* For illustrative purposes. */
  background-color: rgba( 111, 222, 50, 0.15 ); /* For illustrative purposes. */
}

.gallery img {
  float: left;
  margin: 1rem;
  max-width: calc( 33.33333% - 2rem); /* Subtract left and right margins */
}
<div class="container">
  <div class="gallery">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/d10">
    <img src="https://via.placeholder.com/300x300/fc0">
    <img src="https://via.placeholder.com/300x300/">
  </div>
</div>

答案 3 :(得分：-1)

使用html 

<center>
    image code here
</center>

<right>

和

<left>
相关问题
最新问题