html - Make Div of Content Center of the page -
i'm trying replicate page: http://www.jamieoliver.com/recipes/eggs-recipes/spanish-tortilla/
i cant find way make page content stay around center of page site has. can explain me how can this? there tool find out css variables used?
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 versatile , quick whip up. tortilla (or spanish omelette) can served hot or cold , fantastic way of using kinds of ingredients – add in leftover vegetables, crumbled or grated cheese, jarred red peppers or cooked sausage. they’ll taste great, experimenting! ”</p> <h3>serves 6</h3> <h3>difficulty not 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 potatoes using speed-peeler, cut them thin slices. pat potato slices dry clean tea towel.</li> <li>peel , finely slice onion. drizzle 2 tablespoons of oil small frying pan on medium heat, add onion , potatoes.</li> <li>turn heat down low , cook 25 30 minutes, or until onions turning golden , potato slices cooked through. try not stir or potatoes break – use fish slice flip them on halfway through.</li> <li>crack eggs mixing bowl, season tiny pinch of sea salt , black pepper, whisk fork.</li> <li>when onions , potatoes cooked, remove pan heat , tip them eggs. transfer mixture frying pan , place on low heat. cook around 20 minutes, or until there’s no runny egg on top.</li> <li>use fish slice lift , loosen sides of tortilla. flip pan on dinner plate , tip out tortilla, slide pan , cook 5 minutes, or until golden , cooked through.</li> <li>turn out tortilla onto serving board, cut 6 wedges , serve hot or cold simple green salad.</li> </ol> </div> </div> <!-------------- footer ---------------------> <?php include 'footer.html'; ?> </body> </html> css
i use flexbox .row , play width of columns.
.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 versatile , quick whip up. tortilla (or spanish omelette) can served hot or cold , fantastic way of using kinds of ingredients – add in leftover vegetables, crumbled or grated cheese, jarred red peppers or cooked sausage. they’ll taste great, experimenting! ”</p> <h3>serves 6</h3> <h3>difficulty not 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 potatoes using speed-peeler, cut them thin slices. pat potato slices dry clean tea towel.</li> <li>peel , finely slice onion. drizzle 2 tablespoons of oil small frying pan on medium heat, add onion , potatoes.</li> <li>turn heat down low , cook 25 30 minutes, or until onions turning golden , potato slices cooked through. try not stir or potatoes break – use fish slice flip them on halfway through. </li> <li>crack eggs mixing bowl, season tiny pinch of sea salt , black pepper, whisk fork.</li> <li>when onions , potatoes cooked, remove pan heat , tip them eggs. transfer mixture frying pan , place on low heat. cook around 20 minutes, or until there’s no runny egg on top.</li> <li>use fish slice lift , loosen sides of tortilla. flip pan on dinner plate , tip out tortilla, slide pan , cook 5 minutes, or until golden , cooked through.</li> <li>turn out tortilla onto serving board, cut 6 wedges , serve hot or cold simple green salad.</li> </ol> </div> </div>
Comments
Post a Comment