无法将我的div放在页面的中心
[英]Unable to place my div in the center of the page
问题描述
I have a div and in the div i have placed an image. 
我有一个div，在div中我放置了一个图像。 I am trying to position that div in the center of the page but am unable to. 我试图将该div放在页面的中心，但我无法。 Please help me. 请帮我。 Thanks ! 谢谢 ！
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bannerimage {
margin: 0 auto;
}
</style>
</head>
<body>
<div class="bannerimage">
<img src="images/mailer2.jpg">
</div>
</body>
6 个解决方案
解决方案1
0 已采纳 2019-06-14 05:55:27
You can use display: flex for your bannerimage class to center it easily. 您可以使用display: flex为您的bannerimage类轻松地居中。 Hope this helps 希望这可以帮助
.bannerimage {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
height: -webkit-fill-available;
}
解决方案2
0 2019-06-14 05:58:16
img { display:block; margin: auto; }
<body> <div class="bannerimage"> <img src="https://images.pexels.com/photos/414612/pexels-photo-414612.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" width="150px;" height="150px;"> </div> </body>
Check this code.I think this is what you want.:) 检查这段代码。我想这就是你想要的。:)
解决方案3
0 2019-06-14 06:03:19
You can as already written use display:flex; 您可以像已经编写的那样使用display:flex; but there are other ways: 但还有其他方法：
* {
margin : 0;
padding : 0;
}
.bannerimage {
margin : 0 auto;
min-width : 20%;
max-width : 1000px;
text-align : center;
backgroud : #000;
}
What i´ve done is to give the .bannerimage a min- and max-width attribute, you also could use width instead. 我所做的是给.bannerimage一个min-和max-width属性，你也可以使用width。
Edit: 编辑：
Sine i don´t know the resolution of your image this was basic example of how to use margin only to show you how to "center" the div itself. 正弦我不知道你的图像的分辨率这是如何使用保证金的基本例子，只显示如何“居中”div本身。
Now that´s everbodys voting down without even thinking of this point: here is a fiddle, with working code! 现在，这些人甚至在没有考虑到这一点的情况下投票：这是一个小提琴，有工作代码！ OMG! 我的天啊！
https://jsfiddle.net/kymd1jv7/ https://jsfiddle.net/kymd1jv7/
If you don´t give this class a specific width most browsers will handle this class as it will have a width of 100%. 如果你不给这个类一个特定的宽度，大多数浏览器将处理这个类，因为它的宽度为100％。
The "image" could als be centered with text-align : center; “图像”也可以以text-align : center;
解决方案4
0 2019-06-14 06:08:04
there are a lot of ways and this is in addition from https://stackoverflow.com/users/362477/iamnotsam 有很多方法，这是另外从https://stackoverflow.com/users/362477/iamnotsam
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.bannerimage {
margin: 0 auto;
width:100px;
}
body{
height:100%;
}
.content {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="bannerimage">
<img class="content" src="images/mailer2.jpg">
</div>
</body>
解决方案5
0 2019-06-14 06:08:31
You can achieve this by using transform property. 您可以使用transform属性来实现此目的。 Keep in mind that the parent div should be relative 请记住，父div应该是relative
.bannerimage { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); border:1px solid red }
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="bannerimage"> <img src="images/mailer2.jpg"> </div> </body>
解决方案6
0 2019-06-14 06:09:45
add a container with a set width, (width: 100% or display: flex) 添加一个设置宽度的容器（宽度：100％或显示：flex）
You can set the margin property to auto to horizontally center the element within its container.
The element will then take up the specified width, and the remaining space will be split equally between the left and right margins:
https://www.w3schools.com/css/css_margin.asp
.container{ display:flex; } #bannerimage { margin: 0 auto; }
<head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <div class="container"> <img src="https://picsum.photos/" id="bannerimage"> </div> </body>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.