如何使用CSS和HTML在所有设备中心创建div? [英] How can make a div in center all devices using CSS and HTML ?
本文介绍了如何使用CSS和HTML在所有设备中心创建div?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在努力,但没有成功。请解决我的问题。
我的尝试:
I was trying but not success. pls solve my problem.
What I have tried:
<!DOCTYPE html>
<title>Bootstrap Example
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
.center{
height:300px;
width:300px;
background:#eee;
position:absolute;
margin:-150px 0 0 -150px;
left:50px;
top:50px;
}
<div class="center"></div>
推荐答案
查看此信息:以div为中心的完整指南 [ ^ ]
>
我发现很多问题,包括缺少结束标记和缺少正文标记。此外,您的上边距为负,将强制文本位于屏幕上方;所以你不会看到它。
彼得上面的评论会给你答案,但是,我给你的建议是从头开始阅读初学者的教程CSS( CSS教程 [ ^ ])。这将需要一个小时,大约3/4,你将进入布局( CSS布局 - 水平和垂直对齐 [ ^ ])。
I see a lot of problems, including missing closing tags and missing body tag. Additionally, your top margin, being negative, will force the text be above of the screen; so you won't see it.
Peter's comment above will give you the answer, but, my suggestion to you is start from the beginning and read a beginner's tutorial on CSS (CSS Tutorial[^]). It'll take an hour and about 3/4 through, you'll get into layouts (CSS Layout - Horizontal & Vertical Align[^]).
<!DOCTYPE html>
<html>
<head>
<style>
.center{margin: auto; width: 60%; border: 3px solid #000; padding: 10px;}
.center-text{text-align: center;}
</style>
</head>
<body>
<div class="center">
<p>The div is centered, but the text is not.</p>
<h4 class="center-text">This is centered text.</h4>
</div>
</body>
</html>
这篇关于如何使用CSS和HTML在所有设备中心创建div?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文