如何將父元素中的元素居中放置在右側的浮動元素

在附加的圖像中，我試圖集中「哈利」，但似乎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這是否做你想要的？ –

如何將父元素中的元素居中放置在右側的浮動元素

回答

相關問題