Question

我希望我的html报告具有CSS样式，应该易于阅读：因此主体具有最大宽度并且居中。我还希望图形/ img比页面更宽相对于页面相对于页面居中，而当图像不比容器更宽时。

我尝试了一些translateX的东西，还尝试了display: contents;选项。我使用position: absolute;失败，因为连续的数字垂直重叠...

下面的示例代码段。如何实现居中？

body {
  background-color: #ebebeb;
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

figure,
div.figure {
  position: relative;
  text-align: center;
  border: 1px solid #44c;
  padding: 2px;
  left: 50%;
  transform: translateX(-50%);
}

img {
  background-color: #999;
  padding: 2px;
}

<body>
  <p>
    Some text inside a paragraph that should not be too wide and centered in the page. bla bla bla blabla bla bla aaaaaaaaaaaaaaaaaa aaa aaaaa aaaaaaaaaaaaaaa aaa.
  </p>
  <figure>
    <img width=500px src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg"></img>
  </figure>
  <p>
    Some text below.
  </p>
</body>

Answer 1

喜欢吗？

注意：您需要在.cont上更改最大宽度，以使中心容器变大或变小

body{
	margin:0;
	padding:0;
	text-align:center;
    vertical-align: top;
}
.cont{
	text-align:center;
	display: inline-block;
	max-width:600px;
    vertical-align: top;
}
figure{
	display: inline-block;
	margin:0;
    vertical-align: top;
}
img{
	max-width:100%;
    vertical-align: top;
}
p{
	box-sizing: border-box;
	text-align:left;
	padding:10px 5px;
    vertical-align: top;
}

<div class="cont">
	<figure>
		<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg" alt="">
	</figure>
	<p>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin sed vehicula erat. Proin odio nisi, fermentum ut nisi eu, laoreet rutrum leo. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet malesuada arcu. Cras ullamcorper enim justo, sed mattis velit ullamcorper a. Morbi ac egestas lectus. Ut sit amet maximus mauris, eget vehicula ligula. Phasellus sit amet odio gravida, tempus ipsum at, blandit odio. Morbi quis libero non metus ornare varius nec sed tellus. Aenean lacinia, dui vehicula ultrices scelerisque, ex odio viverra nunc, eget posuere tortor est faucibus dui. Aliquam vestibulum libero a auctor ultricies. Morbi sed eros odio. Phasellus molestie sit amet nisl at fermentum. Praesent est erat, tincidunt ut diam nec, molestie varius est. Duis purus libero, placerat sit amet nulla et, pharetra lobortis neque. Quisque quis risus ultricies, semper tellus sit amet, feugiat orci.
	</p>
</div>

Answer 2

好的，我发现了一个简洁的CSS语法，可以使用星号的功能来限制<body>中除<figure>之外的所有内容的宽度：

设置身体的所有后代的样式，但不是身体本身的样式：body * {max-width: 200px;}
仅覆盖数字中的最大宽度：figure {max-width: none !important;}
使img从包含图形的img {max-width: inherit;}继承最大宽度。

body {
  background-color: #ebebeb;
}
body * {
  max-width: 200px;
  margin-left: auto;
  margin-right: auto;
}

figure {
  text-align: center;
  border: 1px solid #44c;
  padding: 2px;
  max-width: none !important;
}

img {
  background-color: #999;
  padding: 2px;
  max-width: inherit;
}

<body>
  <p>
    Some text inside a paragraph that should not be too wide and centered in the page. bla bla bla blabla bla bla aaaaaaaaaaaaaaaaaa aaa aaaaa aaaaaaaaaaaaaaa aaa.
  </p>
  <figure>
    <img width=500px src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e5/Seine_wide.jpg/640px-Seine_wide.jpg"></img>
  </figure>
  <p>
    Some text below.
  </p>
</body>

CSS：水平居中的图形/图像比容器宽

2 个答案: