如何居中对齐父div中的子div与CSS？ [英] How to center align a child div inside a parent div with css?

问题描述

我是html和css的新手，我不知道如何在子div内居中对齐子div。这是我的代码，请回答并解决我的问题。

i am new to html and css and i couldn't figure out how to center align child div inside parent div.This is my code please answer and solve my problem.

CSS

.page {
position:relative;
width:1220px;
height:670px;
background-image:url('/Users/raghunath/Documents/raghu personel/page07.png');
}

.window {
float:center;
width:367px;
height:202px;
background-color:#c6c6c6;
margin-left:auto;
margin-right:auto;
}

* {
padding:0px;
margin:0px;
}

HTML

<div class="page">
<div class="window"><!--  i want to center align this div inside above div  -->
</div>
</div>

推荐答案

首先没有什么叫 float：center; ， float 只有3个有效值，而这些值 ， 左和右。

First of all there is nothing called float:center;, float has only 3 valid values which are none, left and right.

为了居中任何元素您需要先定义一些宽度，然后使用 margin：auto; 将其水平居中。

Inorder to center any element you need to define some width first and than use margin: auto; to center it horizontally.

演示

将元素居中的另一种方法是在父元素上使用 text-align：center; ，但这是一种肮脏的方式

The other way to center an element is to use text-align: center; on the parent element, but this is a dirty way to do so.

您还可以使用CSS定位技术，例如嵌套绝对相对元素内的元素，然后我们使用 left：50％; 和我们使用 margin-left：-100px; （总计，减去元素的总宽度的1/2元素 width 表示为 200px ）。您还可以<< c> $ c 将元素居中放置。

You can also use CSS positioning techniques like nesting a absolute element inside a relative positioned element, and than we center it by using left: 50%; and than we deduct 1/2 of the total width of the element by using margin-left: -100px; (total element width say is 200px). You can also center the element vertically.

使元素在垂直和水平居中的另一种方法是使用 display：table-cell; 属性以及 vertical-align：middle;

The other way to have an element centered vertically as well as horizontally is to use display: table-cell; property along with vertical-align: middle;

演示

这篇关于如何居中对齐父div中的子div与CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！