I wish to center all children within an element without centering all of their chilren.
<Col style={{ textAlign: "center" }}>
<Space>...</Space>
<div>...</div>
</Col>
In this example, I am using antd. The library should not matter though. I wish to add center the Space and div element but not any of Space’s or div’s elements. Using textAlign will center every element contained within its scope, which is not what I want.
Flexbox is the solution. For horizontal centering, use
justify-content
:Note I had to change
Col
in this demo, asCol
is an existing HTML element that may only occur in acolgroup
within atable
element, and cannot have content.use display flex to center the first children:
You could achieve via
flex
Example in HTML+CSS