Question

我很难解决以下问题：

我试图按照以下方式定位几张照片：

他们都占据了整个屏幕的宽度（我知道他们的号码）
图片序列在垂直中间对齐

我找到了this answer，但它没有太大帮助，因为它只允许居中一个图像。此外，import static org.springframework.test.web.servlet.request.MockMvcRequestBuilders.get; import static org.springframework.test.web.servlet.result.MockMvcResultMatchers.status; import static org.springframework.test.web.servlet.setup.MockMvcBuilders.webAppContextSetup; import org.junit.After; import org.junit.Before; import org.junit.Test; import org.junit.runner.RunWith; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.boot.test.context.SpringBootTest; import org.springframework.test.context.junit4.SpringRunner; import org.springframework.test.web.servlet.MockMvc; import org.springframework.test.web.servlet.ResultActions; import org.springframework.test.web.servlet.request.MockHttpServletRequestBuilder; import org.springframework.web.context.WebApplicationContext; @RunWith(SpringRunner.class) @SpringBootTest(webEnvironment = SpringBootTest.WebEnvironment.DEFINED_PORT) public class ProductRestClientTestWithMockMvc { private static final String PRODUCT_API_URI = "http://localhost:8080/api/products/{productId}"; private MockMvc mockMvc = null; @Autowired private WebApplicationContext webApplicationContext; @Before public void before() throws Exception { mockMvc = webAppContextSetup(webApplicationContext).build(); } @After public void after() throws Exception { mockMvc = null; } /* * Testing Happy Path scenario */ @Test public void testProductFound() throws Exception { final MockHttpServletRequestBuilder builder = get(PRODUCT_API_URI, 35); final ResultActions result = mockMvc.perform(builder); result.andExpect(status().isOk()); } /* * Testing Error scenario */ @Test public void testProductNotFound() throws Exception { final MockHttpServletRequestBuilder builder = get(PRODUCT_API_URI, 555); final ResultActions result = mockMvc.perform(builder); result.andExpect(status().isNotFound()); } }不会有太大帮助，因为它只会定位vertical-align元素。

这是我的工作范例：

https://jsfiddle.net/3psbtqxv/1/

＆＃13;

inline

＆＃13;

body {
  padding-top: 5%;
  position: absolute;
  vertical-align: middle;
}

img {
  max-width: 20%;
  height: auto;
}

＆＃13;

我将不胜感激。

Answer 1

试试这个

img {
  max-width:20%;
  height:auto;
  margin-top: 50%;
}

Answer 2

首先谷歌搜索＆＃34; css位置中心页面＆＃34;给了我这个结果：

Quick CSS Trick: How To Center an Object Exactly In The Center

为了使图像准确居中，可以简单地应用图像高度的一半的负上边距和图像宽度的一半的负左边距。对于这个例子，像这样：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -100px;
}

当你知道你所居中的东西的大小时，这非常有用。如果您不知道，或者认为它可能会发生变化并希望成为未来证明，请尝试以下方法：

.centered {
  position: fixed;
  top: 50%;
  left: 50%;
  /* bring your own prefixes */
  transform: translate(-50%, -50%);
}

这适用于您的示例。

编辑：如果您希望它占据整个屏幕宽度，请使用

.centered {
  position: fixed;
  top: 50%;
  left: 0%;
  /* bring your own prefixes */
  transform: translate(-0%, -50%);
}

Answer 3

您应该在img标记而不是容器上设置vertical-align: middle;。如果您选择具有不同高度的图像，您将能够清楚地看到它的工作原理。

img {
  max-width: 20%;
  height: auto;
  vertical-align: middle;
}

<img src="//dummyimage.com/200x100/ccc"><img src="//dummyimage.com/200x200/999"><img src="//dummyimage.com/200x300/666">

img {
  max-width: 20%;
  height: auto;
  vertical-align: top;
}

<img src="//dummyimage.com/200x100/ccc"><img src="//dummyimage.com/200x200/999"><img src="//dummyimage.com/200x300/666">

img {
  max-width: 20%;
  height: auto;
  vertical-align: bottom;
}

<img src="//dummyimage.com/200x100/ccc"><img src="//dummyimage.com/200x200/999"><img src="//dummyimage.com/200x300/666">

Answer 4

将子元素居中的最佳方法是使用flexbox。

#parent{
  display:flex;
  justify-content: center;
  align-items: center;
  width:200px;
  height:200px;
  background-color:red;
  }
  #child{
  width:100px;
  height:100px;
  background-color:blue;
  }

<div id="parent">
  <div id="child">
  child
  </div></div>

Answer 5

有几种方法可以实现这一点，但大多数方法都需要在标记中进行一些更新。我创建了这个Fiddle，它使图像居中，增加了一些额外的包装。我希望它有所帮助。

HTML：

<body>
    <div class="wrapper">
        <div class="inner">
        <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
        <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
        <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
        <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
        <img src="https://images.duckduckgo.com/iu/?u=https%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mf1e819b968b1241bf2a167c08096f7b8o0%26pid%3D15.1&f=1">
        </div>
    </div>
</body>

CSS：

html,
body {
    height: 100%;
}

.wrapper {
    display: table;
    height: 100%;
}

.inner {
    display: table-cell;
    vertical-align: middle;
}

.inner img {
    width: 20%;
    float: left;
}

垂直居中多个图像

5 个答案: