HTML和CSS - 在网站中心图像
问题描述:
我试图居中的图像,但它不工作:(HTML和CSS - 在网站中心图像
我使用参数的text-align:中心;.图像的大小是600x600px和我需要在网站上居中水平
我的代码是:
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
width: 600px;
height: 600px;
display: block;
margin: 0 auto
text-align: center;
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="assets/images/SUGAR.png"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
在此刻却显示:
你能帮帮我吗?
谢谢!
答
拉升.img-sugar
CSS验证码:
.img-sugar{
width: 600px;
height: 600px;
display: block;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
答
试试这个CSS,你有一些语法错误和拼写错误
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
#share-buttons img {
width: 50px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
.img-sugar{
max-width: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>WebCam UI</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link href="assets/css-styles/custom-login-style.css" rel="stylesheet">
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 text-center">
<img class="img-sugar" src="http://placehold.it/350x150"/><br><br><br>
</div>
</div>
<div class="row">
<div class="col-md-12 text-center">
<form action="shareimage.php" method="post">
<input class="" type="file" accept="image/*" capture="camera"/>
</form>
</div>
</div>
<div class="row" id="share-buttons">
<div class="col-md-12 text-center">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=https://simplesharebuttons.com" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/facebook.png" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=https://simplesharebuttons.com&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="https://simplesharebuttons.com/images/somacro/twitter.png" alt="Twitter" />
</a>
</div>
</div>
</body>
答
,如果您插入你的IMG通过CSS这将是easie
.img{
background:url(yourimg.png) center center no-repeat;
}
答
尝试使用此代码
.img-sugar{
width: 600px;
weight: 600px;
display: block;
position: absolute;
vertical-align: center;
horizontal-align: center;
}
也许这个作品:本立法院这里做什么?
答
margin: 0 auto
您忘记带分号;
.img-sugar{
width: 600px;
weight: 600px;
display: block;
margin: 0 auto;
text-align: center;
}
答
使用下面提到的填充值结束。
#share-buttons img {
width: 50px;
padding: 100px;
border: 0;
box-shadow: 0;
display: inline;
}
你能提供这个代码在小提琴 –
你可以使用这两个语句vertical-align:middle; text-align:center; – TheWandererr