Html 使一个桌子单元格圆和响应？

我只知道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的标志。我不知道如何解释得很好。这里有一个网站的链接，让你更明白

---

我不知道，你为什么希望它是表格单元格， 但是，如果你做了以下这些事情，你的徽标在所有分辨率中几乎都保持正确的圆圈

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

---

我已经检查了链接。在这种情况下，将col-md-2-custom替换为col-md-2 旧的

新的：

---

要把某物做成圆形，你应该有一个正方形。在移动设备上，图像的高度>宽度，这导致徽标呈椭圆形

要在较小屏幕的媒体查询中解决此问题，只需确保包装图像的元素的宽度=高度

首先，将一个类添加到保存logo-logo包装的容器中：

并在应用新宽度后使徽标居中：

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

---

在当前的设计中，对.tz-header2.tza徽标做了一些更改。变化如下

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

及

---

拆线高度：193px

你想要像正方形的东西吗？它可以变成圆形，边界半径：50%的标志为我有一个圆形。这是一个圆圈@Deepak我希望在调整web浏览器或移动设备的大小时，圆圈保持圆形。它显示在我的手机@IvankaTodorova上，问题是当它为较小的设备加载时。它被挤压成椭圆形移动这个css解决了这个问题。tz-header2.tzlogo a img{width:100px；/*设置为auto*/}它实际上是我下载的一个模板，我正在调整它。为什么我找不到。tz-header2。TZA-img{..我现在觉得自己很笨。但你们真的很有帮助！我正在尝试你们的所有建议。谢谢！没关系，如果你找不到，只需在CSS底部写下这段代码，就可以了！现在我已经添加了这些行号，可以编辑了。嗨，很抱歉回复太晚了。我更新了网站，它确实有效，但是查看时使用ize手机仍然太大。我正在尝试现在如何使其变小。在移动设备上使用media query并减小其大小嗨！谢谢！我尝试过。是的，它确实保持了圆形，但当屏幕变小时，它的大小不会变小。它保持相同的大小，并且覆盖了滑块。

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

.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;
}

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