制作一个表格单元格并响应？答案

【问题标题】：Make a table-cell round and responsive?制作一个表格单元格并响应？
【发布时间】：2015-08-28 18:15:43
【问题描述】：

我只知道 HTML 和 CSS 的基本知识，所以如果我的问题很愚蠢，请原谅我。是否可以使表格单元格成为一个圆圈并做出响应？我在中间有一个 display:table-cell，徽标位于中间。这是一个方形的单元格，我想要它是圆形的。我试着摆弄它，虽然它在我的浏览器上效果很好，但在我的移动设备上它看起来是椭圆的。

这是我使用的 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;
   }

我在某处读到使用 width: 100% 和 height: auto 但这使它变成椭圆形。它包裹着 img 标志。我不知道如何解释得很好。这是该网站的链接，以使其更有意义。

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

【问题讨论】：

您想要响应式正方形之类的东西吗？可以转成圆圈，border-radius:50%
我的标志是圆形的。是一个圆圈！ i.imgur.com/o2GfegY.png
@Deepak 我希望在调整网络浏览器或移动设备的大小时圆圈保持圆圈。它在我的手机上显示为这样i.imgur.com/s1P2pgp.png
@IvankaTodorova 问题在于它是为较小的设备加载的。它被挤压成椭圆形
删除这个 css 解决了问题 .tz-header2 .tzlogo a img { width: 100px; /* 将此设置为自动 */ }

标签： html css wordpress

【解决方案1】：

我已经检查了链接。在那里，将col-md-2-custom 替换为col-md-2

旧

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

【讨论】：

嗨！谢谢你！我尝试过这个。是的，它确实保持了圆形，但是当屏幕更小时它不会缩小。它保持相同的大小并覆盖滑块。

【解决方案2】：

要将某物做成圆形，您应该有一个正方形。在您在移动设备上的情况下，图像具有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;
}

【讨论】：

【解决方案3】：

我不知道，为什么你希望它是表格单元格，但是，如果您执行以下这些操作，您的徽标在所有分辨率下都会保持几乎正确的圆圈

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

【讨论】：

它实际上是我下载的一个模板，我正在对其进行调整。为什么我找不到 .tz-header2 .tzlogo a img {.. 我现在感觉很愚蠢。但是你们真的很有帮助！我现在正在尝试你所有的建议。谢谢！
没关系，如果你找不到，只要把这段代码写在你的CSS底部，就可以了！现在我已经添加了这些行号，以进行编辑。
您好，抱歉回复晚了。我更新了网站，它确实有效，但是在移动设备上查看时的尺寸仍然太大。我现在正在想办法让它变小。 i.imgur.com/fia7Lss.png
在移动设备上使用媒体查询并减小其大小

【解决方案4】：

在当前设计中对.tz-header2 .tzlogo a 进行一些更改。变化如下

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

和删除line-height: 193px;

【讨论】：