Question

我有4个div，但想要将它们居中（水平和垂直）。

这里不多说，显然这很容易，但我是CSS的新手，并不知道我在做什么。代码到目前为止：

<!DOCTYPE html>
<html>
<head>
	<title>Test</title>
	<style>
	body {
	}
	div {
		background-color:#308DD4;
		opacity:0.8;
		color:white;
		width:200px; /* Change to 200 ish */
		height:auto;
		line-height:150px;
		margin:5px;
		font-size:36pt;
		font-family:sans-serif;
		text-align:center;
		float:left;
	}
	a {
		display:none;
		line-height:35pt;
		color:white;
		text-decoration:none;
		font-size:20pt;
	}
	div:hover a {
		display:block;
	}
	</style>
</head>
<body>
	<div>
		Test 1
		<a href="http://www.example.com">Test</a>
		<a href="http://www.example.com">Test</a>
		<a href="http://www.example.com">Test</a>
	</div>
	<div style="background-color:#ff34b3">
		Test 2
		<a href="http://www.example.com">Test</a>
		<a href="http://www.example.com">Test</a>
	</div>
	<div style="clear:both;background-color:#9344bb">
		Test 3
		<a href="http://www.example.com">Test</a>
		<a href="http://www.example.com">Test</a>
	</div>
	<div style="background-color:#8dd430">
		Test 4
		<a href="http://www.example.com">Test</a>
		<a href="http://www.example.com">Test</a>
		<a href="http://www.example.com">Test</a>
	</div>
</body>
</html>

也是这样的：

有谁知道怎么做this？我试图尽可能多地复制它，但我再也不知道我在做什么......

谢谢， Itechmatrix

Answer 1

如果我明白你的意思，那么请使用以下代码：

<!DOCTYPE html>
<html>
<head>
    <title>Test</title>
    <style>
    body {
    }
    .inner {
        background-color:#308DD4;
        opacity:0.8;
        color:white;
        width:24%; /* Change to 200 ish */
        height:auto;
        line-height:150px;
        margin:5px;
        font-size:36pt;
        font-family:sans-serif;
        text-align:center;
        float:left;
    }
    a {
        display:none;
        line-height:35pt;
        color:white;
        text-decoration:none;
        font-size:20pt;
    }
    .inner:hover a {
        display:block;
    }
    </style>
</head>
<body>
    <div style="width:80%;margin-left:auto;margin-right:auto;">
        <div class="inner">
            Test 1
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
        </div>
        <div style="background-color:#ff34b3" class="inner">
            Test 2
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
        </div>
        <div style="background-color:#9344bb" class="inner">
            Test 3
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
        </div>
        <div style="background-color:#8dd430" class="inner">
            Test 4
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
            <a href="http://www.example.com">Test</a>
        </div>
        <div style="clear:both;"></div>
    </div>
</body>
</html>

通过这个你的div将在中心..请检查并告诉我你是否仍然面临任何问题......

如何居中4格的网格？

1 个答案: