引导程序/垂直居中文字

时间：2019-03-07 18:59:42

标签： html css twitter-bootstrap

我正在学习bootstrap 4，因此尝试了一个小型的示例性foto网站。

https://jsfiddle.net/3z651dy2/

首先，我想知道这是否是个好方法。 还有更多的问题是我无法将.text放在其父 [,1] [,2] [,3] [1,] "Croatia" "1,445,0001,433,5631,458,1491,489,3381,540,2603.4" "" [2,] "Czech Republic" "4,698,8004,787,8494,893,5625,115,3165,368,6605.0" "" [3,] "Denmark" "2,225,1642,265,3492,320,9822,391,7552,477,4783.6" "" [4,] "Estonia" "602,133628,562652,949676,592703,1513.9" "" [5,] "Finland" "2,560,1902,575,9512,595,8672,612,9222,629,4320.6" "" [6,] "France" "31,600,00031,650,00031,799,00031,915,49331,999,9530.3" "" 中。

对我有什么提示吗？

问候 n00n

2 个答案:

答案 0 :(得分：0)

从小提琴看来，通过在justify-content:center上使用flexbox align-items:center和.carousel-item .img .text，文本变得居中。这样做是将div设置为display: flex，并使内容在垂直和水平方向上居中。

有关Flexbox的更多信息：https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 

html, body, .containerWrap{
    height: 100%;
    display: flex;
    flex-direction: column;
    background: red;
    margin: 0;
}
.containerWrap {
	display:flex;
	flex-flow: column nowrap;
	background-color:blue;
}

.defaultContainer {
	flex:none;
	background-color:black;
	color:white;
}

.centerContainer {
	flex:auto;
	background-color:yellow;
	overflow-y: auto;
}

.header{
	height: 95px;
}

.header .row  .col{
	
}

.footer{
	height: 65px;
}

.text-align-right{
	text-align: right;
}

.logo img{
	height: 85px;
}
.carousel-item .img{	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	text-align: center;
}

.carousel-item .img .text{
	color: #000;
	background-color: #FFC;	
	vertical-align: middle;
	opacity: 0.8;
  display: flex;
  justify-content: center;
  align-items: center;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->

    <meta charset="utf-8">

	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <link rel="stylesheet" type="text/css" href="styles.css" media="screen" />

    <title>Hello, world!</title>
  </head>
  <body>


	<div class="containerWrap">
	  <div class="header defaultContainer">
	  	<div class="container-fluid h-100">
			<div class="row h-100 align-items-end">
				<div class="col-4 logo">
					<img src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png"/>
				</div>
				<div class="col-2"></div>
				<div class="col-6 text-align-right">
					<a href="#">one</a>
					<a href="#">two</a>
					<a href="#">three</a>					
					<a href="#">four</a>
					<a href="#">five</a>
				</div>
			</div>
		</div>
	  </div>
	  <div class="centerContainer h-100 bg-secondary text-white">
		


<div id="carouselExampleControls" class="h-100 carousel slide" data-ride="carousel">
  <div class="carousel-inner h-100">
    <div class="carousel-item active h-100 ">
      <div class="img bg-info h-100 " style="background-image: url(test.jpg);">
		<div class="text h-100">first image</div>
	  </div>
    </div>
    <div class="carousel-item h-100">
      <div class="img bg-warning h-100" style="background-image: url(test1.jpg);">
		  <div class="text h-100">second image</div>
	  </div>
    </div>
    <div class="carousel-item h-100">
      <div class="img bg-success h-100" style="background-image: url(test2.jpg);">
		<div class="text h-100">third image</div>
	  </div>
    </div>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
    <span class="carousel-control-prev-icon" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
    <span class="carousel-control-next-icon" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

	  </div>
	  <div class="footer defaultContainer">
		<div class="container-fluid h-100">
			<div class="row h-100">
				<div class="col-5 h-100 bg-success">left info</div>
				<div class="col-2 h-100 bg-warning"></div>
				<div class="col-5 h-100 bg-info text-align-right">right info</div>
			</div>
		</div>
	  </div>
	  
	</div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  </body>
</html>

编辑：在整页模式下查看代码段时，更易于查看。

答案 1 :(得分：0)

由于使用了Boostrap4，因此您也可以使该容器成为flex元素，并使用内置类d-flex align-items-center justify-content-center

https://getbootstrap.com/docs/4.3/utilities/flex/

演示

html,
body,
.containerWrap {
  height: 100%;
  display: flex;
  flex-direction: column;
  background: red;
  margin: 0;
}

.containerWrap {
  display: flex;
  flex-flow: column nowrap;
  background-color: blue;
}

.defaultContainer {
  flex: none;
  background-color: black;
  color: white;
}

.centerContainer {
  flex: auto;
  background-color: yellow;
  overflow-y: auto;
}

.header {
  height: 95px;
}

.header .row .col {}

.footer {
  height: 65px;
}

.text-align-right {
  text-align: right;
}

.logo img {
  height: 85px;
}

.carousel-item .img {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center;
}

.carousel-item .img .text {
  color: #000;
  background-color: #FFC;
  vertical-align: middle;
  opacity: 0.8;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="containerWrap">
  <div class="header defaultContainer">
    <div class="container-fluid h-100">
      <div class="row h-100 align-items-end">
        <div class="col-4 logo">
          <img src="https://logosbynick.com/wp-content/uploads/2018/03/final-logo-example.png" />
        </div>
        <div class="col-2"></div>
        <div class="col-6 text-align-right">
          <a href="#">one</a>
          <a href="#">two</a>
          <a href="#">three</a>
          <a href="#">four</a>
          <a href="#">five</a>
        </div>
      </div>
    </div>
  </div>
  <div class="centerContainer h-100 bg-secondary text-white">





    <div id="carouselExampleControls" class="h-100 carousel slide" data-ride="carousel">
      <div class="carousel-inner h-100">
        <div class="carousel-item active h-100 ">
          <div class="img bg-info h-100 " style="background-image: url(test.jpg);">
            <div class="text h-100 d-flex align-items-center justify-content-center">first image</div>
          </div>
        </div>
        <div class="carousel-item h-100">
          <div class="img bg-warning h-100" style="background-image: url(test1.jpg);">
            <div class="text h-100 d-flex align-items-center justify-content-center">second image</div>
          </div>
        </div>
        <div class="carousel-item h-100">
          <div class="img bg-success h-100" style="background-image: url(test2.jpg);">
            <div class="text h-100 d-flex align-items-center justify-content-center">third image</div>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>

  </div>
  <div class="footer defaultContainer">
    <div class="container-fluid h-100">
      <div class="row h-100">
        <div class="col-5 h-100 bg-success">left info</div>
        <div class="col-2 h-100 bg-warning"></div>
        <div class="col-5 h-100 bg-info text-align-right">right info</div>
      </div>
    </div>
  </div>

</div>

相关问题
最新问题