如何使用CSS类在td元素内对齐div

时间:2022-01-26 20:21:55

It is working with this way

它正在以这种方式工作

<td align="center">

But I want to use CSS class.

但我想使用CSS类。

I defined class like this way but no luck

我这样定义了类,但没有运气

td
{
    vertical-align: middle;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    align: center;
}

Vertical align is working and text align is working for text. But it does not align div inside td with this way. I want to align div inside td.

垂直对齐正在工作,文本对齐正在为文本工作。但它并没有以这种方式将div与div内部对齐。我想在td内对齐div。

2 个解决方案

#1


105  

div { margin: auto; }

This will center your div.

这将使你的div居中。

Div by itself is a blockelement. Therefor you need to define the style to the div how to behave.

Div本身就是一个障碍元素。因此,您需要为div定义样式如何表现。

#2


4  

I cannot help you much without a small (possibly reduced) snippit of the problem. If the problem is what I think it is then it's because a div by default takes up 100% width, and as such cannot be aligned.

没有一小部分(可能减少)的问题,我无法帮助你。如果问题是我认为的那么,那是因为默认情况下div占用100%的宽度,因此无法对齐。

What you may be after is to align the inline elements inside the div (such as text) with text-align:center; otherwise you may consider setting the div to display:inline-block;

你可能想要的是将div中的内联元素(例如文本)与text-align:center对齐;否则你可以考虑设置div来显示:inline-block;

If you do go down the inline-block route then you may have to consider my favorite IE hack.

如果你确实沿着内联块路线走,那么你可能不得不考虑我最喜欢的IE浏览器。

width:100px;
display:inline-block;
zoom:1; //IE only
*display:inline; //IE only

Happy Coding :)

快乐编码:)

#1


105  

div { margin: auto; }

This will center your div.

这将使你的div居中。

Div by itself is a blockelement. Therefor you need to define the style to the div how to behave.

Div本身就是一个障碍元素。因此,您需要为div定义样式如何表现。

#2


4  

I cannot help you much without a small (possibly reduced) snippit of the problem. If the problem is what I think it is then it's because a div by default takes up 100% width, and as such cannot be aligned.

没有一小部分(可能减少)的问题,我无法帮助你。如果问题是我认为的那么,那是因为默认情况下div占用100%的宽度,因此无法对齐。

What you may be after is to align the inline elements inside the div (such as text) with text-align:center; otherwise you may consider setting the div to display:inline-block;

你可能想要的是将div中的内联元素(例如文本)与text-align:center对齐;否则你可以考虑设置div来显示:inline-block;

If you do go down the inline-block route then you may have to consider my favorite IE hack.

如果你确实沿着内联块路线走,那么你可能不得不考虑我最喜欢的IE浏览器。

width:100px;
display:inline-block;
zoom:1; //IE only
*display:inline; //IE only

Happy Coding :)

快乐编码:)