本文介绍了如何将表右边的文本垂直对齐到表的中间?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我使用此非常有用的



编辑 p>

您还可以添加填充,以便在分数中包含分数时增加栏:

  .fraction> span {
padding:0 7px;
}

在这里查看:


I have created an 'inline' table using this extremely useful Stack Overflow Link, made to look like a fraction. A picture of it is put below:

Now all works fine, but look at what happens when content next to it is placed in:

The plus sign aligns itself with the top of the table. So I was wondering, is there a way to align it to the middle of the table(near the vinculum or middle line)?

EDIT: Due to user requests, this is the code for my table and also the plus sign:

<table style="border-collapse: collapse; width: auto; float: left; margin: 2px;">
  <tbody>
    <tr><td style="text-align: center;padding: 5px; border-bottom: 1px solid black;">3</td></tr>
    <tr><td style="text-align: center; padding: 5px;">5</td></tr>
  </tbody>
</table>
+

Also, all of the above code is placed in a p element.

解决方案

Why do you use tables? I think this is better:

HTML:

<span class="fraction">
    <span>5</span>
    <span>3</span>
</span>
+
<span class="fraction">
    <span>1</span>
    <span>2</span>
</span>

CSS:

.fraction{
    display:inline-block;
    vertical-align:middle;
}
.fraction>span{
    display:block;
}
.fraction>span:first-child{
    border-bottom:1px solid black;
}

See it here: http://jsfiddle.net/7aQUP/

Edit:

You can also add padding in order to increase the bar when you have fractions inside fractions:

.fraction>span{
    padding:0 7px;
}

See it here: http://jsfiddle.net/7aQUP/2/

这篇关于如何将表右边的文本垂直对齐到表的中间?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-31 00:59