Блог

Главная - Вопросы по программированию - Bootstrap: как правильно расположить изображение по центру столбца?

Bootstrap: как правильно расположить изображение по центру столбца?

#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 выравнивает все изображения по центру как по горизонтали, так и по вертикали.

Спасибо всем!