Question

我在将H2和H4元素垂直居中到具有50％边界半径的div中时遇到问题。看起来像：

当然，即使在小型设备上，我也想将此文本居中。我在将圆角div居中时遇到问题，因此我将其用于display：table，因此担心它确定我无法以简单的方式将文本居中。你有什么想法吗？

    .meals
	{
		width: 100%;
		margin-top: 60px;
		display: flex;
	}
		

	@media screen and (max-width: 600px)
	{
		.meals
		{
			flex-direction: column;
			align-items: center;
		}
		.meals-box
		{
			width: 100%;
			display: table;
	  		position: relative;
		}

	}

	@media screen and (min-width: 600px) and (max-width: 960px)
	{
		.meals
		{
			flex-direction: row;
			flex-wrap: wrap;
		}
		.meals-box
		{
			width: 50%;
			display: table;
	  		position: relative;
		}

	}

	@media screen and (min-width: 960px)
	{
		.meals
		{
			flex-direction: row;
		}
		.meals-box
		{
			width: 25%;
			display: table;
	  		position: relative;
		}

	}

	.burgers-overlay
	{
		background: url(img/Burger-Craft-139.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.hot-dogs-overlay
	{
		background: url(img/Burger-Craft-123.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.bowls-overlay
	{
		background: url(img/Burger-Craft-72.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.salads-overlay
	{
		background: url(img/Burger-Craft-44.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.meals-text
	{
		background-color: #FFF;
		border-radius: 50%;
		width: 170px;
		height: 170px;
		box-shadow: 1px 1px 5px #000;
		margin: 0 auto;
	}

	.meals-text h2, .meals-text h4
	{
		text-align: center;
	}

    <section class="meals">
			<div class="meals-box">
				<div class="burgers-overlay">
					<div class="meals-text">
						<h2>Burgers</h2>
						<h4>View menu</h4>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="hot-dogs-overlay">
					<div class="meals-text">
						<h2>Hot dogs</h2>
						<h4>View menu</h4>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="bowls-overlay">
					<div class="meals-text">
						<h2>Bowls</h2>
						<h4>View menu</h4>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="salads-overlay">
					<div class="meals-text">
						<h2>Salads</h2>
						<h4>View menu</h4>
					</div>
				</div>
			</div>
		</section>

Answer 1

是的，可以使用CSS的 flex box 属性。我在下面添加了代码段。

只需添加

display:flex;
justify-content:center;
align-items:center;
flex-direction: column;

到您的.meals-text类。它工作正常

.meals
	{
		width: 100%;
		margin-top: 60px;
		display: flex;
	}
		

	@media screen and (max-width: 600px)
	{
		.meals
		{
			flex-direction: column;
			align-items: center;
		}
		.meals-box
		{
			width: 100%;
			display: table;
	  		position: relative;
		}

	}

	@media screen and (min-width: 600px) and (max-width: 960px)
	{
		.meals
		{
			flex-direction: row;
			flex-wrap: wrap;
		}
		.meals-box
		{
			width: 50%;
			display: table;
	  		position: relative;
		}

	}

	@media screen and (min-width: 960px)
	{
		.meals
		{
			flex-direction: row;
		}
		.meals-box
		{
			width: 25%;
			display: table;
	  		position: relative;
		}

	}

	.burgers-overlay
	{
		background: url(img/Burger-Craft-139.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.hot-dogs-overlay
	{
		background: url(img/Burger-Craft-123.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.bowls-overlay
	{
		background: url(img/Burger-Craft-72.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.salads-overlay
	{
		background: url(img/Burger-Craft-44.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.meals-text
	{
		background-color: #FFF;
		border-radius: 50%;
		width: 170px;
		height: 170px;
		box-shadow: 1px 1px 5px #000;
		margin: 0 auto;
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction: column;
    
	}

	.meals-text h2, .meals-text h4
	{
		text-align: center;
	}

<section class="meals">
			<div class="meals-box">
				<div class="burgers-overlay">
					<div class="meals-text">
						<h2>Burgers</h2>
						<h4>View menu</h4>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="hot-dogs-overlay">
					<div class="meals-text">
						<h2>Hot dogs</h2>
						<h4>View menu</h4>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="bowls-overlay">
					<div class="meals-text">
						<h2>Bowls</h2>
						<h4>View menu</h4>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="salads-overlay">
					<div class="meals-text">
						<h2>Salads</h2>
						<h4>View menu</h4>
					</div>
				</div>
			</div>
		</section>

Answer 2

.meals
	{
		width: 100%;
		margin-top: 60px;
		display: flex;
	}
		

	@media screen and (max-width: 600px)
	{
		.meals
		{
			flex-direction: column;
			align-items: center;
		}
		.meals-box
		{
			width: 100%;
			display: table;
	  		position: relative;
		}

	}

	@media screen and (min-width: 600px) and (max-width: 960px)
	{
		.meals
		{
			flex-direction: row;
			flex-wrap: wrap;
		}
		.meals-box
		{
			width: 50%;
			display: table;
	  		position: relative;
		}

	}

	@media screen and (min-width: 960px)
	{
		.meals
		{
			flex-direction: row;
		}
		.meals-box
		{
			width: 25%;
			display: table;
	  		position: relative;
		}

	}

	.burgers-overlay
	{
		background: url(img/Burger-Craft-139.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.hot-dogs-overlay
	{
		background: url(img/Burger-Craft-123.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.bowls-overlay
	{
		background: url(img/Burger-Craft-72.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.salads-overlay
	{
		background: url(img/Burger-Craft-44.jpg);
		height: 300px;
		background-size: cover;
		background-position: center;
		display: table-cell;
	  	vertical-align: middle;
	}

	.meals-text
	{
		background-color: #FFF;
		border-radius: 50%;
		width: 170px;
		height: 170px;
		box-shadow: 1px 1px 5px #000;
		margin: 0 auto;
	}

	.meals-text h2, .meals-text h4
	{
		text-align: center;
	}
	.center{
		width: 170px;
		height: 170px;
		margin: 0 auto;
		vertical-align: middle;
		text-align: center;
		position: relative;
		display: table-cell;
	}

   <section class="meals">
			<div class="meals-box">
				<div class="burgers-overlay orly">
					<div class="meals-text">
						<div class="center">
							<h2>Burgers</h2>
							<h4>View menu</h4>
						</div>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="hot-dogs-overlay orly">
					<div class="meals-text">
						<div class="center">
						<h2>Hot dogs</h2>
						<h4>View menu</h4>
						</div>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="bowls-overlay orly">
					<div class="meals-text">
						<div class="center">
						<h2>Bowls</h2>
						<h4>View menu</h4>
						</div>
					</div>
				</div>
			</div>
			<div class="meals-box">
				<div class="salads-overlay orly">
					<div class="meals-text">
					<div class="center">
						<h2>Salads</h2>
						<h4>View menu</h4>
					</div>
					</div>
				</div>
			</div>
		</section>

将文本居中到圆形div

2 个答案: