mi problema es que mi texto e ícono en un botón antd no están alineados verticalmente en mi aplicación de reacción.
Aquí está el código:
<Button type="primary" size="large" block icon={<PlusCircleOutlined />} onClick={()=>this.showModalSharePicture()}> Text </Button>El ícono es un poco bajo en comparación con el texto que está bien centrado en el botón. ¿Cómo puedo solucionar este problema que tengo en todos mis botones?
Aquí está el html renderizado:
<button type="button" class="ant-btn ant-btn-primary ant-btn-lg ant-btn-block"><span role="img" aria-label="plus-circle" class="anticon anticon-plus-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M696 480H544V328c0-4.4-3.6-8-8-8h-48c-4.4 0-8 3.6-8 8v152H328c-4.4 0-8 3.6-8 8v48c0 4.4 3.6 8 8 8h152v152c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V544h152c4.4 0 8-3.6 8-8v-48c0-4.4-3.6-8-8-8z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span><span>Text</span></button>Una forma posible de hacerlo es usando el siguiente estilo:
button, span { display: inline-flex; align-items: center; } También puede usar sus nombres de clase ant-btn , anticon para diseñarlos según sus preferencias y necesidades.