做一個表格單元輪迴和響應？

我知道HTML和CSS只有基本的東西，所以請原諒我，如果我的問題是愚蠢的。是否有可能讓表格單元變成一個圓圈並且有響應？我有一個顯示器：中間有徽標坐在中央的表格單元格。這是一個方形的細胞，我想要它。我試着擺弄，而當它在我的瀏覽器上顯示出來的時候，當涉及到我的移動設備時，它看起來很橢圓。做一個表格單元輪迴和響應？

下面是我使用的CSS：

.tz-header2 .tzlogo a { 
    vertical-align: middle; 
    display: table-cell; 
    width: 200px; 
    z-index: 999; 
    text-align: center; 
    border-radius: 100%; 
    height: 193px; 
    -webkit-box-shadow: 1px 5px 12px -1px rgba(147,152,153,1); 
    -moz-box-shadow: 1px 5px 12px -1px rgba(147,152,153,1); 
    box-shadow: 1px 5px 12px -1px rgba(147,152,153,1); 
    /* border-style: solid; */ 
    border-color: whitesmoke; 
    background: #d65679; 
    }

我讀的地方使用寬度：100％和height：汽車，但使得它在橢圓形的。它包裹了img標誌。我不知道如何解釋它。這是網站的鏈接，使其更有意義。

http://1d6.60a.myftpupload.com/

來源

2015-08-28 greenmang0es

你想要的東西就像響應方？它可以通過'border-radius：50％'轉成圓形。 –

我的標誌是圓形的。這是一個圓圈！ http://i.imgur.com/o2GfegY.png –

@Deepak我希望圓圈在調整網頁瀏覽器或移動設備的大小時保持循環。它在我的手機http://i.imgur.com/s1P2pgp上顯示。png – greenmang0es

我不知道，爲什麼你希望它是表單元格，但是，如果你做這些事情之後，你的標誌幾乎保持適當的圈子，在所有分辨率

.tz-header2 .tzlogo a { 
display:block; 
line-height:193px; /* height of circle, to vertically align logo in middle Line No: 185 (index.html) */ 
} 
.tz-header2 .tzlogo a img { 
width:100% /* keep it 100% for all screen resolutions Line No.: 11983 (style.css) */ 
}

來源

2015-08-28 07:02:25

它實際上是一個模板，我下載並調整它。爲什麼我找不到.tz-header2 .tzlogo a img {..我現在覺得很愚蠢。但你們真的很有幫助！我正在嘗試你所有的建議。謝謝！ – greenmang0es

無關緊要，如果找不到，只需在CSS底部編寫此代碼即可使用！現在我已經添加了這些行號，進行編輯。 –

@ greenmang0es沒有工作？ –

我已檢查鏈接。在這方面，與col-md-2

OLD

<div class="col-md-2-custom"> 
    <h3 class="tzlogo"> 
     <a href="http://1d6.60a.myftpupload.com" title="Emily Grace Events"> 
      <img src="http://1d6.60a.myftpupload.com/wp-content/uploads/2015/08/logo-design-GV2-small.png" alt="Emily Grace Events"> 
     </a> 
    </h3> 
    </div>

更換新col-md-2-custom：

<div class="col-md-2"> 
     <h3 class="tzlogo"> 
      <a href="http://1d6.60a.myftpupload.com" title="Emily Grace Events"> 
       <img src="http://1d6.60a.myftpupload.com/wp-content/uploads/2015/08/logo-design-GV2-small.png" alt="Emily Grace Events"> 
      </a> 
     </h3> 
     </div>

來源

2015-08-28 07:02:43 Omkar

嗨！感謝你！我嘗試過這個。是的，它確實保持了圓形的形狀，但是它在屏幕較小時不會縮小。它保持相同的大小，它涵蓋了滑塊。 – greenmang0es

爲了圓的東西作爲一個圓，你應該有一個正方形。在您的移動設備上，圖像有height>width，這會導致徽標處於橢圓形狀。

要在媒體查詢解決這一問題的屏幕較小，只要確保包裝的圖像具有width=height的元素。

首先添加一個類的<a>拿着標誌 - logo-wrapper：

<a href="http://1d6.60a.myftpupload.com" title="Emily Grace Events" class="logo-wrapper"> 
    <img src="http://1d6.60a.myftpupload.com/wp-content/uploads/2015/08/logo-design-GV2-small.png" alt="Emily Grace Events"> 
</a>

然後在你的CSS媒體查詢 - @media (max-width: 479px)地址：

.logo-wrapper { 
    width: 100px; 
    height: 100px; 
}

而新的寬度後居中標誌應用：

.tz-header2 .tzlogo { 
    position: absolute; 
    top: 0; 
    margin-left: -50px; 
    left: 50%; 
    margin: -9px 0 0 -50px; 
    padding: 0; 
}

來源

2015-08-28 07:03:10

我該如何添加？ – greenmang0es

我更新了我的答案。 –

In cur租賃設計在中做了一些更改。變化如下

height 100%; 
width: 100%; 
padding-top: 31%; 
padding-bottom: 26%;

和刪除line-height: 193px;

來源

2015-08-28 10:15:43 Omkar

做一個表格單元輪迴和響應？

回答

相關問題