如何使用CSS和HTML在所有设备中心创建div? [英] How can make a div in center all devices using CSS and HTML ?

查看:134
本文介绍了如何使用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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆