Question

我最近开始了关于Udacity的简介web开发课程。他们现在正在覆盖一个基本的网格框架，整个项目很容易，除非我已经在他们的图像下正确地对齐字幕几个小时。目标是在imgur链接中模仿投资组合页面模型（http://imgur.com/CIQWlBi）。

现在，我试图做的事情，主要是为了学习它，是：

分发/证明＆＃34;特色作品＆＃34;下的图像和标题。横跨整个网格宽度;左对齐左图像，右对齐右图像
为每个图像和标题使用一个网格列（我可以通过省略网格轻松地使我的页面类似于模型，并简单地使用带有对齐内容的flexbox：之间的空间，但是应该是一种方式我想这是用网格做的。）
相对于IMAGE的中心标题（h3和p），而不是相对于网格列。这会对最左侧和最右侧的列产生影响。

最后一个是给我带来麻烦的。我终于说了一下，我会问比我更聪明的人解决可能是一个非常简单的问题。我已经在这里和其他论坛上的帖子中尝试过几种不同的解决方案，但没有一种方法有效。我尝试过的一些事情是（显示：表格）+（显示：表格标题）和（图）+（figcaption），两者都有一些不同的风格规则。

是否有一种干净的方法可以将图像置于图像中心，无论图像在容器内的位置如何？或者，我是否需要为列中的每个图像创建具有显式大小的容器，并将文本放在每个容器中？

同样，flexbox允许我复制模型，但为了学习，我希望能够在网格内完成此操作。

编辑：我忘了包含代码段。他们很粗暴，因为我一直在尝试一堆不同的东西。

＆＃13;

* {
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

/* -- see how boxes line up
* {
	border: 1px solid red !important;
} */

.grid {
	margin: 0 auto;
	min-width: 960px;
    max-width: 1360px; /* caption text centered (relative to image and grid column) at 960px, but I want to see it centered at any width */
}

.row {
	width: 100%;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
}

.col-1 {
	width: 8.33%;
}

.col-2 {
	width: 16.66%;
}

.col-3 {
	width: 25%;
}

.col-4 {
	width: 33.33%;
}

.col-5 {
	width: 41.66%;
}

.col-6 {
	width: 49.99%;
}

.col-7 {
	width: 58.33%;
}

.col-8 {
	width: 66.66%;
}

.col-9 {
	width: 75%;
}

.col-10 {
	width: 83.33%;
}

.col-11 {
	width: 91.66%;
}

.col-12 {
	width: 100%;
}

.left {
	text-align: left;
}

.center {
	text-align: center;
}

.right {
	text-align: right;
}

figure {
	display: block;
	margin: 0px;
}

figure figcaption {
	text-align: center;
}

#header {
	border-bottom: 3px solid #BCBBBB;
	margin-bottom: 30px;
	padding-bottom: 15px;
}

#nameheader {
	text-align: right;
}

#subname {
	margin-bottom: 0px;
}

＆＃13;

<body>
	<div class="grid">
		<div class="row" id="header">
			<div class="col-6">
				<img src="http://placehold.it/100x100" alt="placeholder">
			</div>
			<div class="col-6" id="nameheader">
				<h1>JANE DOETTE</h1>
				<p id="subname">FRONT-END NINJA</p>
			</div>
		</div>

		<div class="row">
			<div class="col-12">
				<img src="http://placehold.it/960x350" alt="placeholder">
			</div>
		</div>

		<div class="row">
			<div class="col-12">
				<h2>&nbsp;Featured Work</h2>
			</div>
		</div>
		<div class="row">
			<div class="col-4">
				<figure class="left">
					<img src="http://placehold.it/300x200" alt="placeholder" class="left">
					<figcaption>
						<h3>APPIFY</h3>
						<p>http://url.com</p>
					</figcaption>
				</figure>
			</div>
			<div class="col-4">
				<figure class="center">
					<img src="http://placehold.it/300x200" alt="placeholder" class="center">
					<figcaption>
						<h3>SUNFLOWER</h3>
						<p>http://url.com</p>
					</figcaption>
				</figure>
			</div>
			<div class="col-4">
				<figure class="right">
					<img src="http://placehold.it/300x200" alt="placeholder" class="right">
					<figcaption>
						<h3>BOKEH</h3>
						<p>http://url.com</p>
					</figcaption>
				</figure>
			</div>
	</div>
</body>

＆＃13;

Answer 1

您当前的CSS非常接近实现您的目标。剩下的唯一问题是每个图片周围的<figure>都有display:block - 这意味着它会扩展到其容器的整个宽度（封闭的列元素）。

这是一个问题，因为一旦浏览器足够宽，您的父列始终会调整大小，而您的图像是静态大小的。正如您所注意到的，这意味着在某个浏览器宽度之后，您的标题文本将不再位于图像的中心。

要解决此问题，请考虑将<figure>的样式更改为：

figure {
    display: inline-block;
    margin: 0px;
}

这样，您的<figure>元素只会根据其内容扩展到所需的宽度，而不是总是扩展到封闭列的整个宽度，因此标题文本将不再相对居中到调整大小列。这是一个JSFiddle to demonstrate。

希望这有帮助！如果您有任何问题，请告诉我。

在网格列

1 个答案: