如何将父元素中的元素居中放置在右侧的浮动元素

在附加的图像中，我试图集中“哈利”，但似乎margin: 0 auto;并不忽略右侧的“删除”元素。有没有人知道我可以居中“哈利”，同时仍然有右边的“删除”按钮？如何将父元素中的元素居中放置在右侧的浮动元素

这里是我现有的HTML

<table class="week_table" summary="Users for week"> 
    <thead > 
    <tr align="center" class="TableHeader"> 
    <th align="center" class="week_table_heading"> 
     <%= event.date.day.to_s + " " + event.date.strftime("%B") %> 
    </th> 
    </tr> 
    </thead> 
<!-- <tr> 
    <td> 
     <%= event.remaining_spaces? %> 
    </td> 
</tr>--> 

<% event.users.each do |user| %> 
    <tr > 
     <td class="week_table_row"> 
     <% if user == current_user %> 
     <a class="RemoveButton"href=<%="welcome/remove_from_month?event_id="+event.id.to_s%>>remove </a> 
     <%end%> 
     <span class="UserName"> 
     <%= user.first_name %> 
     </span> 
    </td> 
    </tr> 
<% end %> 
    <tr align="center"> 
    <td align="center"> 
<% if !event.users.include?(current_user) %> 
     <a href=<%="welcome/sign_up_month?event_id="+event.id.to_s%>>Sign Up</a> 

<% end %> 
    </td> 
    </tr> 
</table>

来源

2015-11-01 villy393

“位置：绝对”的“移除”和“位置：相对”的容器。 –

如果我这样做，那么删除按钮不再出现在白色框内，而是出现在屏幕的右边缘。 – villy393

发布了我现有的html。 – villy393

李斯特先生是正确的...

你必须：

.remove {position: absolute; right:0;} 
.container-harry {position:relative}

和哈里将居中。

来源

2015-11-01 07:41:05 curosio

'.week_table {width：100％}/*或其他... */ .week_table_row {position：relative} .RemoveButton {position：absolute;正确：0}' – curosio

这里有你的链接[jsfiddle示例]（https://jsfiddle.net/samuells/yo0ya9gv/） – Samuell

@Samuell这是否做你想要的？ –

如何将父元素中的元素居中放置在右侧的浮动元素

回答

相关问题