我试图复制此页面：http://www.jamieoliver.com/recipes/eggs-recipes/spanish-tortilla/
我无法找到一种方法让页面内容保持在页面的中心，就像这个网站一样。有人可以解释我怎么能这样做？有没有一个很好的工具来找出他使用的css变量？
HTML
<!DOCTYPE html>
/*-------------------------RECIPES---------------------------*/
.recipe-header-left{
float:left;
position: relative;
padding-left: 25px;
padding-right: 25px;
}
.recipe-ingredients {
float:left;
}
body {
padding-left: 25px;
padding-right: 25px;
}<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/customCSS.css" >
<title></title>
</head>
<body>
<!-------------- HEADER --------------------->
<?php include 'header.php'; ?>
<!-------------- CONTENT --------------------->
<div class="container-fluid">
<div class="row">
<div class="recipe-header-left" >
<img src="http://cdn.jamieoliver.com/recipe-database/xtra_med/46260004.jpg">
</div>
<div class="recipe-details">
<h1>Spanish tortilla</h1>
<h5>A SPANISH CLASSIC</h5>
<p>“This classic Spanish dish is very versatile and quick to whip up. The tortilla (or Spanish omelette) can be served hot or cold and is a fantastic way of using up all kinds of ingredients – simply add in any leftover vegetables, crumbled or grated cheese, jarred red peppers or cooked sausage. They’ll all taste great, so get experimenting! ”</p>
<h3>Serves 6</h3>
<h3>Difficulty NOT TOO TRICKY</h3>
</div>
<div class="recipe-ingredients">
<h2>Ingredients</h2>
<p>300 g waxy potatoes</p>
<p>1 onion</p>
<p>olive oil</p>
<p>5 large free-range eggs</p>
</div>
</div>
<div class="row" style="padding-left: 25px;">
<h2>Method</h2>
<ol>
<li>Peel the potatoes using a speed-peeler, then carefully cut them into thin slices. Pat the potato slices dry with a clean tea towel.</li>
<li>Peel and finely slice the onion. Drizzle 2 tablespoons of oil into a small frying pan over a medium heat, then add the onion and potatoes.</li>
<li>Turn the heat down to low and cook for 25 to 30 minutes, or until the onions are turning golden and the potato slices are cooked through. Try not to stir it too much or the potatoes will break up – just use a fish slice to flip them over halfway through.</li>
<li>Crack the eggs into a mixing bowl, season with a tiny pinch of sea salt and black pepper, then whisk together with a fork.</li>
<li>When the onions and potatoes are cooked, remove the pan from the heat and carefully tip them into the eggs. Transfer the mixture back into the frying pan and place it over a low heat. Cook for around 20 minutes, or until there’s almost no runny egg on top.</li>
<li>Use a fish slice to slightly lift and loosen the sides of the tortilla. Carefully flip the pan over a dinner plate and tip out the tortilla, then slide it back into the pan and cook for another 5 minutes, or until golden and cooked through.</li>
<li>Turn out the tortilla onto a serving board, then cut into 6 wedges and serve hot or cold with a simple green salad.</li>
</ol>
</div>
</div>
<!-------------- FOOTER --------------------->
<?php include 'footer.html'; ?>
</body>
</html>
CSS
答案 0 :(得分：0)
要使div居中，您需要设置margin: 15px auto并限制宽度
.container-fluid {
width: 100%;
max-width: 960px;
margin: 15px auto;
}
答案 1 :(得分：0)
我会为.row使用flexbox并使用列的宽度。
.recipe-header-left {
float: left;
position: relative;
padding-left: 25px;
padding-right: 25px;
}
.recipe-ingredients {
width: 20%;
}
body {
padding-left: 25px;
padding-right: 25px;
}
.row {
display: flex;
}
.recipe-details {
width: 50%;
}
.method {
width: 40%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container-fluid">
<div class="row">
<div class="recipe-header-left">
<img src="http://cdn.jamieoliver.com/recipe-database/xtra_med/46260004.jpg">
</div>
<div class="recipe-details">
<h1>Spanish tortilla</h1>
<h5>A SPANISH CLASSIC</h5>
<p>“This classic Spanish dish is very versatile and quick to whip up. The tortilla (or Spanish omelette) can be served hot or cold and is a fantastic way of using up all kinds of ingredients – simply add in any leftover vegetables, crumbled or grated
cheese, jarred red peppers or cooked sausage. They’ll all taste great, so get experimenting! ”</p>
<h3>Serves 6</h3>
<h3>Difficulty NOT TOO TRICKY</h3>
</div>
</div>
<div class="row">
<div class="recipe-ingredients">
<h2>Ingredients</h2>
<p>300 g waxy potatoes</p>
<p>1 onion</p>
<p>olive oil</p>
<p>5 large free-range eggs</p>
</div>
<div class="method">
<h2>Method</h2>
<ol>
<li>Peel the potatoes using a speed-peeler, then carefully cut them into thin slices. Pat the potato slices dry with a clean tea towel.</li>
<li>Peel and finely slice the onion. Drizzle 2 tablespoons of oil into a small frying pan over a medium heat, then add the onion and potatoes.</li>
<li>Turn the heat down to low and cook for 25 to 30 minutes, or until the onions are turning golden and the potato slices are cooked through. Try not to stir it too much or the potatoes will break up – just use a fish slice to flip them over halfway
through.
</li>
<li>Crack the eggs into a mixing bowl, season with a tiny pinch of sea salt and black pepper, then whisk together with a fork.</li>
<li>When the onions and potatoes are cooked, remove the pan from the heat and carefully tip them into the eggs. Transfer the mixture back into the frying pan and place it over a low heat. Cook for around 20 minutes, or until there’s almost no runny
egg on top.</li>
<li>Use a fish slice to slightly lift and loosen the sides of the tortilla. Carefully flip the pan over a dinner plate and tip out the tortilla, then slide it back into the pan and cook for another 5 minutes, or until golden and cooked through.</li>
<li>Turn out the tortilla onto a serving board, then cut into 6 wedges and serve hot or cold with a simple green salad.</li>
</ol>
</div>
</div>