HTML CSS圖片不會居中

-1

我有問題：我的畫並不想中心，儘管我用text-aligne:center;，display:block;和margin: 0 auto;HTML CSS圖片不會居中

這裏是一個圖片

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    background-attachment: fixed; 
 
    background-size: 100%; 
 
} 
 

 
#container { 
 
    max-width: 1000px; 
 
    margin: 0 auto; 
 
} 
 

 
#Logo { 
 
    text-align: center; 
 
}

<!DOCTYPE HTML> 
 
<html lang="pl"> 
 

 
<head> 
 
    <meta charset="utf-8" /> 
 
    <title>str</title> 
 
    <meta name="description" content=" bbbbbbb" /> 
 
    <meta name="keywords" content="bablal" /> 
 
    <meta http-equiv="X-UA-COMPATIBLE" content="IE=edge.chrome=1" /> 
 
    <link rel="stylesheet" href="new.css" type="text/css" /> 
 
    <link href="https://fonts.googleapis.com/css?family=Oxygen:300,400&amp;subset=latin-ext" rel="stylesheet"> 
 
</head> 
 

 
<body background="photo/ik.png"> 
 
    <div id="container"> 
 
    <div id="Logo"> 
 
     <img src="photo/lg.png" width="800" height="533.5"> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

來源

2017-08-02 norbik543

你想要居中什麼？該徽標？ – Aslam

是的，我想中心徽標 – norbik543

刪除在'img'元素上設置的顯式寬度，並聲明'max-width'爲'100％'。 – UncaughtTypeError

一種方法使用Flexbox。

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    box-sizing: border-box; 
 
    background-attachment: fixed; 
 
    background-size: 100%; 
 
} 
 

 
#container { 
 
    background: yellow; 
 
    height: 100vh; 
 
    width: 100vw; 
 
    margin: 0 auto; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
}

<div id="container"> 
 
    <div id="Logo"> 
 
    <img src="http://placehold.it/200x100/333333"> 
 
    </div> 
 
</div>

來源

2017-08-02 09:58:20 Aslam

仍然沒有工作;/ – norbik543

你從代碼片段中取代了CSS嗎？ – Aslam

http://imgur.com/a/uCRsq – norbik543

變化的#container {最大寬度：1000像素到寬度：100％}

來源

2017-08-02 09:58:42 Sanil

http://imgur.com/a/be8Cf仍然不工作 – norbik543

@ norbik543請檢查您的lg.png寬度。可能會有一些透明像素的寬度會佔據位置。通過任何圖像查看器打開lg.png並檢查寬度。 – Sanil

寬度1600高度1067 – norbik543

嘗試：

.Image{ 
 
     background:#ccc; 
 
     padding:30px; 
 
} 
 
    
 
.img-responsive{ 
 
     display: block; 
 
     height: auto; 
 
     max-width: 100%; 
 
     margin:0 auto; 
 
    }

<div class="Image"> 
 
    <img src="http://minisoft.com.bd/uploads/ourteam/rafiq.jpg" class="img-responsive" title="Rafique" alt="Rafique"> 
 
</div>

來源

2017-08-02 10:00:10

http://imgur.com/a/XUQMe仍然不工作;/ – norbik543

再次檢查。 –

您的照片位於中心 – norbik543

設置保證金圖像自身的y自動在左側和右側。

HTML部分

<body> 
    <div id="container"> 
    <div id="Logo"> 
     <img class="centeredimage" src="photo/lg.png" width="80" height="50"> 
    </div> 
    </div> 
</body>

CSS部分

img.centeredimage{ 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
}

小提琴： https://jsfiddle.net/ja0zhnsd/

來源

2017-08-02 10:03:42 Happysmithers

#container { 
    width: 100%; 
} 

#Logo img { 
    text-align: center; 
    margin: 0 auto; 
}

工作的呢？

來源

2017-08-02 10:17:35 Fuller93

HTML CSS圖片不會居中

回答

相關問題