个人中心
gpt4 book ai didi

html - 垂直对齐的表格和表格单元格 : middle

转载 作者：太空宇宙 更新时间：2023-11-04 10:14:00 27 4
gpt4 key购买 nike

表格和表格单元格不起作用。我将表格的高度设置为 100% 并将表格单元格设置为自动。然后我尝试将 table-cell 设置为 vertical-align middle 100% 宽度但不起作用。我的代码有什么问题？

实时预览:http://designer.com.bd/foysal/

代码:

/*Roboto Fonts*/
@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700,700italic,500italic,400italic,300italic);

/*PlayFairDisplay Fonts*/
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic);

/*UNIVERSAL CODE*/
* {margin: 0;padding: 0;}
ul {margin: 0;padding: 0;list-style-type: none;}
h1,h2,h3,h4,h5,h6 {margin: 0;padding: 0; font-family: 'Playfair Display', serif;margin: 0 0 15px; font-weight : 700}
body {font-family: 'Roboto', sans-serif; font-size: 14px;}
.alignleft {float:left; margin-right: 15px}
.alignright {float:right; margin-left: 15px;}
.aligncenter {display: block; margin: 0 auto 15px;}
img {max-width: 100%; height: auto;}
html, body {height: 100%}
a:hover {text-decoration: none;}
a:focus {text-decoration: none;outline: 0 solid}
a:visited {text-decoration: none;}

/*Remove chrome Input Field’s Unwanted Yellow Background Color*/
input: -webkit-autofill,
input: -webkit-autofill:hover,
input: -webkit-autofill:focus {-webkit-box-shadow: 0 0 0 100px white inset !important;}  

/***********************************************/

.welcome-hero-area, .welcome-slider-area, .welcome-slider-area div {
    height: 100%;
}
.welcome-hero-area div.slide-item-tablecell, .welcome-hero-area div.slide-item-tablecell div {
    height: auto;
}
.slide-item-tablecell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
}

.slide-item-table {
    display: table;
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Title goes to here</title>
    <!--    Google Fonts-->
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/font-awesome.min.css">

    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/style.css" rel="stylesheet">
    <link href="css/responsive.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
    <body>
      
<!--Starting Header with Welcome area-->
      <div class="welcome-hero-area">
        <!--<div class="header_area">
              <div class="container">
                  <div class="row">
                      <div class="col-md-4">
                          <div class="logo">
                              <a href="#"><img src="img/logo.png" alt="logo"></a>
                          </div>
                      </div>
                      <div class="col-md-8">
                          <div class="mainmenu">
                              <ul>
                                  <li><a href="#">HOME</a></li>
                                  <li><a href="#">ABOUT</a></li>
                                  <li><a href="#">EXPERTISE</a></li>
                                  <li><a href="#">TEAMS</a></li>
                                  <li><a href="#">WORKS</a></li>
                                  <li><a href="#">PEOPLE SAY</a></li>
                                  <li><a href="#">CONTACT</a></li>
                              </ul>
                          </div>
                      </div>
                  </div> <!--end of row-->

              <!--</div> <!--end of container-->
          <!--</div> <!--end of header area -->

        <!--Starting Slider Area-->
         <div class="welcome-slider-area">
             <div id="welcome-slide-carousel" class="carousel slide" data-interval="5000000" data-ride="carousel">
                  <!-- Indicators -->
                  <ol class="carousel-indicators">
                    <li data-target="#welcome-slide-carouse" data-slide-to="0" class="active"></li>
                    <li data-target="#welcome-slide-carouse" data-slide-to="1"></li>
                    <li data-target="#welcome-slide-carouse" data-slide-to="2"></li>
                    <li data-target="#welcome-slide-carouse" data-slide-to="3"></li>
                  </ol>

                  <!-- Wrapper for slides -->
                  <div class="carousel-inner" role="listbox">
                    <div class="item active"> <!--1st img-->
                        <div class="single-slide-item slide-1">
                            <div class="slide-item-table">
                                <div class="slide-item-tablecell">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-md-10 col-md-offset-1">
                                                <h2>We Are Awesome Creative Agency</h2>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas voluptatibus animi atque at! Ad modi voluptatem, velit, officia eligendi nesciunt dolore nobis laborum repellendus sapiente, maiores magni odit. Temporibus, sit.</p>
                                                <a class="slide-btn" href="#">Learn More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div> 

                    <div class="item">  <!--2nd img-->
                        <div class="single-slide-item slide-2">
                            <div class="slide-item-table">
                                <div class="slide-item-tablecell">
                                    <div class="container">
                                        <div class="row">
                                            <div class="col-md-10 col-md-offset-1">
                                                <h2>We Are Awesome Creative Agency</h2>
                                                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas voluptatibus animi atque at! Ad modi voluptatem, velit, officia eligendi nesciunt dolore nobis laborum repellendus sapiente, maiores magni odit. Temporibus, sit.</p>
                                                <a class="slide-btn" href="#">Learn More</a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
             </div>
         </div> <!--end of welcome slider area-->
      </div> <!--end of welcome hero area-->
      



       
       
        
        
        <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="js/bootstrap.min.js"></script>
        <!-- Custom JavaScript-->
        <script src="js/main.js"></script>
    </body>
</html>



<!--Today's Learn
21 May 2016
-----------
* giving css value to all div and child: Suppose, you've a div with calss of container and under the container you've another 4 div with calass name of them are: 
<div class="container">
    <div class="1">
        <div class="2">
            <div class="3">
                <div class="4">
                    
                </div>
            </div>
        </div>
    </div>
</div>
Now hoy you give to all div's css value which are same you have 2 ways 1 put css property and value separtly. or  you can put css value all in one time if you have same css property and value. So how? then select the parrent div like

.container div {
    height:100%;
}

In this code mention all of your div as a child and giving css.
-----------

*Table and Tablecell rules: if you want to use table and tablecell for making content to center which is up or down/ left or right firstly you need to make 100% height for all div if the table and tablecell are child div then only tablecell need to height auto.




-->

最佳答案 

.welcome-slider-area div {
    height: 100%;
}

这使你所有的 div 都在 .welcome-slider-area 中，尝试为 .slide-item-tablecell 的 child 设置高度> 分区。

<div class="container" style="height: 100px;">
    <!-- content -->
</div>

关于html - 垂直对齐的表格和表格单元格 : middle，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37373111/

27 4 0
文章推荐： java - 从 URLConnection 读取(php 文件)
文章推荐： 带有下划线前缀的python导入模块
文章推荐： java - 如何从 HackerEarth 优化这个练习？
文章推荐： python - 在 pypandoc (pandoc) 中将较大的 HTML 文件转换为 docx 的问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com