使用CSS保持图像居中 [英] Keeping Images Centered using CSS

问题描述

我正在为一个班级作业写一个小网页。我希望将文本保留在列中以及我正在计划放置图像的段落之间。如何在不改变尺寸的情况下将图像保存在列中？

CSS

  body {
 background-image：网址（某些图片）; 
 background-size：cover; 
 background-repeat：none; 
} 
 
 .body-box {
 display：block; 
保证金余额：33％; 
保证金率：33％; 
 padding-left：3％; 
填充权：3％; 
 border-left：4px纯黑色; 
 border-right：4px纯黑色; 
 
 word-wrap：打破单词; 
 text-align：justify; 
 font-family：'Lato：300'，serif; 
 
颜色：黑色; 
背景颜色：白色; 
 
  

HTML

 < div class =body-box> 
 
< h1>一些文字< / h1> 
 
< a href =某个图像>< img src =某个链接
 alt =某事模糊width =autoheight =autoalign = 中心 >< / A> 
 
< h2>一些文字< / h2> 
< p>部分段落< / p> 
  

解决方案

  img {
 display：block; 
 margin：0 auto; 
 
 
 
 
 
 
如果你只有一个（这个）图像的意思，
  .image1 img {
 display：block; 
 margin：0 auto; 
} 
  
请参阅 
 
 
如果您需要重新调整大小，
 p> 小提琴 
 
 
 
重新尺寸和填写div的意思， 
 
 
 小提琴 
 
I'm writing a small web page for a class assignment. I want to keep the text inside a column and in between paragraphs I'm planning on placing images. How do I keep the images inside the column without specifically changing their dimensions? 

CSS 
body {
        background-image:url("Some Image");
        background-size:cover;
        background-repeat:none;
    }

    .body-box {
                display:block;
                margin-left:33%;
                margin-right:33%;
                padding-left:3%; 
                padding-right:3%;
                border-left:4px solid black;  
                border-right:4px solid black;

                word-wrap:break-word; 
                text-align:justify;
                font-family:'Lato:300',serif; 

                color:black;
                background-color:white; 
            }
HTML
<div class="body-box">  

        <h1>Some Text</h1>

        <a href="Some Image"><img src="Some Link" 
        alt="Something Vague" width="auto" height="auto" align="center"></a>

        <h2>Some Text</h2>
        <p>Some Paragraph</p>

解决方案
You can arrange all image center in your site means, 
img{
  display:block;
  margin:0 auto;
}
If you only one ( this ) image means,
.image1 img{
  display:block;
  margin:0 auto;
}
See this fiddle.

If you need re-size means,

fiddle

re-size and fill the div means,

fiddle

                        
这篇关于使用CSS保持图像居中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！