如何将图像对准中心？
[英]how do I align an image to center?
问题描述
I'm doing a simple test website to practice html. 
我正在做一个简单的测试网站来练习html。 These are the image align variants I've tried that haven't worked: 这些是我尝试过的无效的图像对齐变体：
<style type="text/css">
img {
image-align: center;
border: 2px dashed gray;
height: 200px;
width: 140px;
}
</style>
<img src="images/htmlphoto2.jpg" alt="profile pic of man wearing tie" align="middle"/>
<style type="text\css">
img {
margin-right: auto;
margin-left: auto;
}
<style type="text\css">
img {
display: block;
margin: 0 auto;
}
</style>
full code: I'm using a combination of internal style sheet and inline styling for practice. 完整代码：我将内部样式表和内联样式结合起来进行练习。
<!-- autobiobrevio -->
<!-- 8/21/14 11:00 - 11:50 Structure completed -->
<!--8/23/14 10:00 pm - Alignment -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>biosite</title>
<style type="text/css">
h1 {
text-align: center;
}
img {
image-align: center;
border: 2px dashed gray;
height: 200px;
width: 140px;
}
</style>
</head>
<body>
<h1> Steve's Autobiobrevio </h1>
<img src="images/htmlphoto2.jpg" alt="profile pic of guy wearing tie" />
<br>
<br>
<table>
<tr>
<td>
<ul> <span style="font-family: Impact"> De moi </span>
<li> Born October 1972 </li>
<li> CT </li>
<li> blah blah blah </li>
</ul>
</td>
<td>
<ul> <span style="font-family: Impact"> Hobbies </span>
<li> Guitar </li>
<li> HTML </li>
<li> Hiking </li>
</ul>
</td>
<td>
<ul> <span style="font-family: Impact"> Fav Guitarists </span>
<li> David Gilmour </li>
<li> Muddy Waters </li>
<li> Dave Navarro </li>
</ul>
</td>
</table>
<div style="width: 800px; height: 100px; background-color: red" </div>
</body>
</html>
Thank you. 谢谢。
5 个解决方案
解决方案1
1 2014-08-23 13:19:37
try to add display:block to your 尝试将display:block添加到您的
html : html：
<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie" align="middle"/>
css : css：
img.displayed {
display: block;
margin-left: auto;
margin-right: auto;
}
解决方案2
1
Can you provide the full html code?Anyway First remove align="middle " and try this even if it's similar to yours 能否提供完整的html代码？无论如何，首先删除align =“ middle”并尝试执行此操作，即使它与您的代码相似
img{
display:block;
margin:auto;
}
解决方案3
0 2014-08-23 13:41:00
I solved my problem by using the inline style tag: 我通过使用内联样式标签解决了我的问题：
But why didn't the inline style sheet work? 但是为什么内联样式表不起作用？
解决方案4
0 2014-08-23 13:42:38
Try this,It Will definately work.. 试试这个，它一定会工作..
Image Code : 图片代码：
<img src="http://farshadajdar.com/imgeditor/tweety.png" class="displayed" alt="profile pic of man wearing tie"/>
Here goes the css : CSS来了：
<style type=text/css>
img.displayed {
position: fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
}
</style>
Hop it will work for you too.. 希望它也能为您服务。
解决方案5
0 2014-08-23 15:21:32
You can also try: 您也可以尝试：
<style type="text/css">
img {
position:absolute;
border:2px dashed gray;
height:200px;
width:140px;
margin:auto;
top:0;
bottom:0;
left:0;
right:0;
}
</style>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.