Question

我想将父元素与父元素

垂直放置

<!DOCTYPE html>
<html>
<head>
	<title>Jajal</title>
	<style type="text/css">
		#body {
			font-family: sans-serif, arial, 'Roboto';
		}
		#outer {
			width: 280px;
			background-color: white;
			height: 253px;
			background-color: #f0f0f0;
		}
		.imgbox {
			height: 174px;
			width: 270px;
			overflow: hidden;
			display: table;
			margin: 0 auto;
			background-color: black;
			text-align: center;
		}
		.img_content {
			max-height: 174px;
			max-width: 270px;
			margin: 0 auto; 
			vertical-align: middle;
			display: table-cell;
		}
		.titlebox {
			max-width: 270px;
			text-align: center;
		}
		.title {
			font-weight: 900;
			font-size: 14px;
		}
	</style>
</head>
<body>
	<div id="outer">
		<div class="imgbox">
			<img class="img_content" src="http://lorempixel.com/700/100" alt="coba">
		</div>
		<div class="titlebox">
			<p class="title">Lorem ipsum Amet</p>
		</div>
	</div>
</body>
</html>

为什么img_content类在图像宽度时不会将verticaly置于imgbox类的中间位置？

Answer 1

添加以下CSS：

    <ui:repeat id="repeat" value="#{bean.list}" var="item" varStatus="status"><h:form id="supervisorCircleForm">
         <p:dataTable id="supervisor_table" var="pass" value="#{bean.insideList}">
             <p:column headerText="Name" styleClass="center">
                <h:outputText value="#{pass.memberName}"/>
             </p:column>
             <p:column headerText="Companies" styleClass="center">
                <select class="taxiCircle" multiple="multiple">
                   <c:forEach var="item" items="${bean.companyList}">
                       <option value="${item.value}">${item.label}  </option>                 
                   </c:forEach>
                </select>
             </p:column>
         </p:dataTable>
      </h:form>
    </ui:repeat>
    <script type="text/javascript">
        (function(){
          $('.taxiCircle').multiselect();
           console.log("Func Called");
          })();
    </script>

Answer 2

使用css3 flexbox。应该在父元素上添加以下css。

.parent {
  justify-content: center;
  align-items: center;
  display: flex;
}

#body {
  font-family: sans-serif, arial, 'Roboto';
}
#outer {
  width: 280px;
  background-color: white;
  height: 253px;
  background-color: #f0f0f0;
}
.imgbox {
  justify-content: center;
  align-items: center;
  display: flex;
  height: 174px;
  width: 270px;
  overflow: hidden;
  margin: 0 auto;
  background-color: black;
  text-align: center;
}
.img_content {
  max-height: 174px;
  max-width: 270px;
}
.titlebox {
  max-width: 270px;
  text-align: center;
}
.title {
  font-weight: 900;
  font-size: 14px;
}

<div id="outer">
  <div class="imgbox">
    <img class="img_content" src="http://lorempixel.com/700/100" alt="coba">
  </div>
  <div class="titlebox">
    <p class="title">Lorem ipsum Amet</p>
  </div>
</div>

Answer 3

有很多方法可以做到这一点。你可以将他的img标签包装在一个带有类，包装器的div中。然后包装器div会有这样的样式：

.wrapper {
       vertical-align: middle;
       display: table-cell;
}

，并从图像中删除display：table-cell和vertical-align：middle

如果您不想在现有CSS中进行任何更改，请使用其他方式使用小提琴 https://jsfiddle.net/mfkxq728/

此外，您可以使用flex（浏览器支持可能是一个问题）或者使用translate-Y的良好的旧相对绝对位置。但是，translate-Y需要浏览器前缀才能保持一致的性能。

干杯!!

将div垂直中间与父级放置

3 个答案: