Question

这是我的 HTML ：

<div class="overlay">
  <div id="loading">
    <img src="styles/images/30.gif">
  </div>
</div>

我想让它垂直和水平居中。
图像仅水平居中，如下面的屏幕截图所示：

我的 CSS 看起来像这样：

.overlay {
   background: #e9e9e9;
   display: none;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   opacity: .5;
}

#loading {
   text-align: center;
}

#loading img {
   display: table-cell;
   margin: 0 auto;
}

如何使其垂直居中？提前谢谢。

Answer 1

父级（img）高度是子元素（* { padding: 0; margin: 0; } .overlay { background: #e9e9e9; opacity: 0.5; } #loading { display: flex; height: 100vh; } #loading img { margin: auto; }）的高度。因为垂直对齐没有意义。设置较大高度的父级，然后内部元素可以通过任何可用的方式垂直居中。

＆＃13;

<div class="overlay">
  <div id="loading">
    <img src="http://placehold.it/160x120">
  </div>
</div>

＆＃13;

// single page for show result and submit query "allcustomerdetails.php"

<form name="frmnamesd" method="POST" action="<?php echo $_SERVER['PHP_SELF'];?>" onSubmit="return validated(this)" id = "frmnamesd" enctype="multipart/form-data">
                <fieldset class="row1">
                &nbsp &nbsp; <label>Search By:</label>
                <br>
                &nbsp;&nbsp;&nbsp;&nbsp;<label>Customer ID:</label> &nbsp &nbsp;
                <input type="text" name="c_id" size = "8" onKeyPress="return isNumberKey(event)" value = "<?php echo isset($_POST['c_id']) ? $_POST['c_id'] : '';?>" />&nbsp &nbsp;
                <label>Name:</label> &nbsp &nbsp;
                <input type="text" name="c_name" size = "10" value = "<?php echo isset($_POST['c_name']) ? $_POST['c_name'] : '';?>" /> &nbsp &nbsp;
                <label>Mobile:</label> &nbsp &nbsp;
                <input type="text" name="c_mobile" onKeyPress="return isNumberKey(event)" size="10" value = "<?php echo isset($_POST['c_mobile']) ? $_POST['c_mobile'] : '';?>" /> &nbsp &nbsp;
                <label>Customer Type:</label>&nbsp &nbsp 
                <select name="c_type">              
                    <option value="<?php echo isset($_POST['c_type']) ? $_POST['c_type'] : '';?>" ><?php echo isset($_POST['c_type']) ? $_POST['c_type'] : "-select-";?></option>
                    <option value="IW">IW</option>
                    <option value="AMC">AMC</option>
                    <option value="SAC">SAC</option>
                    <option value="OW">OW</option>
                    <option value="PS">PS</option>
                </select>&nbsp &nbsp;
                <label>Date From/To:</label>&nbsp &nbsp;
                <input type="date" name="c_from" value = "<?php echo isset($_POST['c_from']) ? $_POST['c_from'] : '';?>">
                <input type="date" name="c_to" value = "<?php echo isset($_POST['c_to']) ? $_POST['c_to'] : '';?>" ><br><br>
                &nbsp &nbsp&nbsp &nbsp;<label>Address:</label> &nbsp &nbsp;&nbsp &nbsp;&nbsp &nbsp;&nbsp &nbsp;
                <input type="text" name="c_address" size = "32" value = "<?php echo isset($_POST['c_address']) ? $_POST['c_address'] : '';?>" > &nbsp &nbsp;
                <center><input type="Submit" name="submit" value="Submit">&nbsp &nbsp;<input type="reset" name="reset" value="reset"></center>
                </fieldset>
                </form>

<?php 

$limit = 100;  
if (isset($_GET["page"])) { 

    $page  = $_GET["page"];
    $page_offset = ($page-1) * $limit; 
} 
else { 
$page_offset = 0;
$page = 1;
} 

$query = "SELECT * FROM customer_details";
$querycount = "SELECT COUNT(*) FROM customer_details";
if(isset($_POST['submit'])) {
    // define the list of fields
    $fromdate = $_POST['c_from'];
    $todate  = $_POST['c_to'];
    $fields = array('c_id','c_name','c_mobile', 'c_type','c_address');
    $conditions = array();

    // loop through the defined fields
    foreach($fields as $field){
        //$abc = $_POST[$field];
        //die;
        // if the field is set and not empty
        if(isset($_POST[$field]) && $_POST[$field] != '') {
            // create a new condition while escaping the value inputed by the user (SQL Injection)
            $conditions[] = "`$field` LIKE '%" . mysqli_real_escape_string($con, $_POST[$field]) . "%'";
        }
    }
    if(isset($_POST['c_from']) && $_POST['c_to'] != '') {
    // builds the query
            $query .= " WHERE c_next_service between '$fromdate' and '$todate'";
            $querycount .= " WHERE c_next_service between '$fromdate' and '$todate'";

            if(count($conditions) > 0) {

                $query .= " AND" . implode (' AND ', $conditions);
                $querycount .= " AND" . implode (' AND ', $conditions);
                $query .= " order by c_id desc LIMIT $page_offset, $limit";
                $querycount .= " order by c_id desc";
            }
            else {
                $query .= " order by c_id desc LIMIT $page_offset, $limit";
                $querycount .= " order by c_id desc";
            }
        }
    // if there are conditions defined
    elseif(count($conditions) > 0) {
            $query .= " WHERE" . implode (' AND ', $conditions); // you can change to 'OR', but I suggest to apply the filters cumulative
            $query .= " order by c_id desc LIMIT $page_offset, $limit" ;
            $querycount .= " WHERE" . implode (' AND ', $conditions); // you can change to 'OR', but I suggest to apply the filters cumulative
            $querycount .= " order by c_id desc" ;
        }
    else {
        // append the conditions
            $query .= " order by c_id desc LIMIT $page_offset, $limit";
            $querycount .= " order by c_id desc";
        }
    }
else {
    $query .= " order by c_id desc LIMIT $page_offset, $limit";
    $querycount .= " order by c_id desc";
}

$result = mysqli_query($con, $query);
$resultcount = mysqli_query($con,$querycount);
$count = mysqli_fetch_row($resultcount);  
$totalrows = $count[0];  

<?php if($_POST) {?>
<br><center><button onClick="history.go(-1)">Go Back</button></center>

<?php
    }
$total_pages = ceil($totalrows/$limit);  
$pagLink = "<div class='pagin'>";  
for ($i=1; $i<=$total_pages; $i++) { 
                $pagLink .= "<a href='allcustomerdetail.php?page=".$i."'>&nbsp;&nbsp;&nbsp;&nbsp;".$i."</a>";   
};  
    ?><br><br><center><?php echo $pagLink . "</div>";?><br><br></center>

＆＃13;

Answer 2

有几种方法可以实现垂直对齐，其中许多方法变得复杂。

最简单的修复方法之一是将元素设置为绝对定位，将边距设置为auto，同时将顶部和底部定义为0。

org.apache.solr.client.solrj.SolrServerException: No live SolrServers available to handle this request

Link to jsfiddle

如何使用CSS将图像置于div中？

2 个答案: