Question

我只知道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％和高度：自动，但这使得它呈椭圆形。它缠绕着img标志。我不知道如何解释它。这是网站的链接，更有意义。

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

Answer 1

我不知道，为什么你想让它成为桌面细胞，但是，如果您执行以下操作，则所有分辨率中的徽标都会保持几乎正确的圆圈

.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) */
}

Answer 2

我查了一下这个链接。在其中，将col-md-2-custom替换为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>

新人：

<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>

Answer 3

要制作圆形的圆形，你应该有一个正方形。在您的移动设备上，图片有height ＆gt; 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;
}

Answer 4

在当前设计中，<item name="selectableItemBackground">@drawable/abc_item_background_holo_dark</item>进行一些更改。变更如下

.tz-header2 .tzlogo a

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

制作一个表格单元并且响应迅速？

4 个答案: