如何使容器div内的箭头图标贴近右边缘且垂直对齐？

需要实现以下布局效果：让所有<i class="bi bi-chevron-right flecha"></i>图标贴近#contenedor容器的右边缘，同时保持垂直对齐。现有HTML和CSS代码如下，寻求调整方案达成目标。

原CSS代码 #

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  font-size: 24px;
}

body {}

#contenedor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 850px;
  background-color: wheat;
  border-radius: 30px;
}

img {
  width: 60px;
}

button {
  width: 90px;
  height: 90px;
  border-radius: 200px;
  border: none;
  cursor: pointer;
  display: inline-block;
}

.opciones {
  margin: 20px auto;
  width: 500px;
  display: flex;
  align-items: center;
}

i {
  font-size: 32px;
}

#titulo {
  font-size: 40px;
  text-align: center;
  margin: 30px auto;
}

a {
  margin-left: 15px;
}

.flecha {
  color: black;
  font-size: 20px;
  display: inline-block;
}

原HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mi cuenta</title>
  <link rel="stylesheet" href="/css/micuenta.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
</head>

<body>
  <div id="contenedor">
    <h1 id="titulo">mi cuenta</h1>
    <div class="opciones" id="usuario">
      <button><img src="/img/seguridad.png" alt=""></button>
      <a href="">inicio de sesion y seguridad</a><i class="bi bi-chevron-right flecha "></i>
      <!--cambiar informacion personal del usuario-->
    </div>
    <div class="opciones" id="pedidos">
      <button><img src="/img/pedidos.png" alt=""></button>
      <a href="">mis pedidos</a><i class="bi bi-chevron-right flecha"></i>
      <!--todos procesando enviado entregado  cancelados por el usuario -->
    </div>
    <div class="opciones" id="paquetes">
      <button><i class="bi bi-geo-alt-fill"></i></button>
      <a href="">direccion</a><i class="bi bi-chevron-right flecha "></i>
      <!--direccion de entrega de paquetes-->
    </div>
    <div class="opciones" id="metodospago">
      <button> <i class="bi bi-credit-card"></i></button>
      <a href="">metodos de pago</a><i class="bi bi-chevron-right  flecha"></i>
      <!--tarjetas de credito del usuario-->
    </div>
    <div class="opciones" id="ayuda">
      <button><i class="bi bi-question-octagon"></i></button>
      <a href="">servicio al cliente</a><br><i class="bi bi-chevron-right  flecha"></i>
      <!--ayuda/ pqr-->
    </div>
  </div>
</body>

</html>

通过以下修改可以实现箭头贴近容器右边缘且垂直对齐的效果：

修改后的CSS代码 #

* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  font-family: Arial, Helvetica, sans-serif;
  color: black;
  font-size: 24px;
}

#contenedor {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 700px;
  height: 850px;
  background-color: wheat;
  border-radius: 30px;
  padding: 0 30px;
  box-sizing: border-box;
}

img {
  width: 60px;
}

button {
  width: 90px;
  height: 90px;
  border-radius: 200px;
  border: none;
  cursor: pointer;
}

.opciones {
  margin: 20px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.opcion-left {
  display: flex;
  align-items: center;
}

i {
  font-size: 32px;
}

#titulo {
  font-size: 40px;
  text-align: center;
  margin: 30px 0;
}

a {
  margin-left: 15px;
}

.flecha {
  color: black;
  font-size: 20px;
}

修改后的HTML代码 #

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>mi cuenta</title>
  <link rel="stylesheet" href="/css/micuenta.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.2/font/bootstrap-icons.min.css">
</head>

<body>
  <div id="contenedor">
    <h1 id="titulo">mi cuenta</h1>
    <div class="opciones" id="usuario">
      <div class="opcion-left">
        <button><img src="/img/seguridad.png" alt=""></button>
        <a href="">inicio de sesion y seguridad</a>
      </div>
      <i class="bi bi-chevron-right flecha "></i>
    </div>
    <div class="opciones" id="pedidos">
      <div class="opcion-left">
        <button><img src="/img/pedidos.png" alt=""></button>
        <a href="">mis pedidos</a>
      </div>
      <i class="bi bi-chevron-right flecha"></i>
    </div>
    <div class="opciones" id="paquetes">
      <div class="opcion-left">
        <button><i class="bi bi-geo-alt-fill"></i></button>
        <a href="">direccion</a>
      </div>
      <i class="bi bi-chevron-right flecha "></i>
    </div>
    <div class="opciones" id="metodospago">
      <div class="opcion-left">
        <button> <i class="bi bi-credit-card"></i></button>
        <a href="">metodos de pago</a>
      </div>
      <i class="bi bi-chevron-right  flecha"></i>
    </div>
    <div class="opciones" id="ayuda">
      <div class="opcion-left">
        <button><i class="bi bi-question-octagon"></i></button>
        <a href="">servicio al cliente</a>
      </div>
      <i class="bi bi-chevron-right  flecha"></i>
    </div>
  </div>
</body>

</html>

修改说明 #

1. 容器内边距设置：给#contenedor添加左右内边距，避免箭头完全贴死容器边缘，同时用box-sizing: border-box确保容器总宽度不变。
2. 选项布局重构：
   • 给.opciones设置justify-content: space-between，让左侧元素组和箭头分别对齐左右两侧。
   • 新增.opcion-left容器包裹按钮和链接，确保两者始终在同一行，避免内容换行导致错位。
3. 修复换行问题：移除#ayuda中的<br>标签，保证箭头与左侧元素垂直对齐。
4. 简化冗余样式：删除不必要的display: inline-block声明，精简代码结构。

内容的提问来源于stack exchange，提问作者BIOMBROCK