#html #css #bootstrap-4
#HTML #css #bootstrap-4
Вопрос:
Я хотел бы поместить 4 изображения в 4 сложенных столбца, используя Bootstrap. Вот мой код:
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html> 4 изображения выровнены по левому краю (на большом экране), я хочу выровнять их по вертикали и горизонтали в центре, независимо от любых изменений ширины или высоты изображения, как я могу это сделать? Я провел поиск в Интернете, но, похоже, ничто по-настоящему не решает проблему.
Комментарии:
1. Bootstrap поставляется с рядом классов, которые вы можете применить «из коробки» для центрирования объекта — getbootstrap.com/docs/4.3/utilities/flex
Ответ №1:
Или вы можете сделать это с помощью flexbox.
Добавьте в свой col-md-6
display: flex;
align-items: center;
justify-content: center
Ответ №2:
Это лучший способ сделать его отзывчивым:
Добавьте в свой css:
.rounded{
display:block;
margin-left: auto;
margin-right: auto;
} <html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html> Комментарии:
1. Ваше решение не работает, если я изменю ширину второго изображения на 100%, оно только выровняет изображение по центру по горизонтали, но не по вертикали
Ответ №3:
используйте класс text-center для div столбца
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6 text-center" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6 text-center" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html> Комментарии:
1. Если я изменю ширину 2-го изображения на 100%, ваше решение только выровняет 1-е изображение по центру по горизонтали, но не по вертикали.
Ответ №4:
Согласно вашему коду … вы можете просто использовать margin-left:25%; . используйте img тег для всех изображений. Вы также можете использовать image class="text-center"
img {
margin-left:25%;
} <html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px;float:middle">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower" style="width:50%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html> Ответ №5:
Возможно, это поможет вам. Пожалуйста, проверьте приведенный ниже пример.
.image-center {
position: relative;
}
.image-center:after {
display: inline-block;
padding-bottom: 100%;
content: "";
}
.image-center img {
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 0;
margin: auto;
width: auto;
height: auto;
max-width: 70%;
max-height: 70%;
} <html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6" style="background-color:lavender">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower">
</div>
</div>
<div class="col-sm-6" style="background-color:lavenderblush">
<div class="image-center">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower">
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html> Ответ №6:
@gionic решает проблему. Другие в этом случае работать не будут:
.col-md-6{
display: flex;
align-items: center;
justify-content: center
} <html>
<head>
<h3>Align the 4 images to the center horizontally and vertically, even with height change of some images, rest images should still in the center.</h3>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="testImageCenter.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-lg-6">
<div class="row">
<div class="col-md-6" style="background-color:lavenderblush">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower"
style="width:70%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavender;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower"
style="width:40%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
<div class="row">
<div class="col-md-6" style="background-color:lavender">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower"
style="width:80%; margin-top: 10px; margin-bottom: 10px">
</div>
<div class="col-md-6" style="background-color:lavenderblush;">
<img src="https://images.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg?auto=compressamp;cs=tinysrgbamp;dpr=1amp;w=500" class="rounded" alt="flower"
style="width:100%; margin-top: 10px; margin-bottom: 10px">
</div>
</div>
</div>
</div>
</div>
</body>
</html> При изменении высоты некоторых изображений ответ @gionic выравнивает все изображения по центру как по горизонтали, так и по вертикали.
Спасибо всем!