vue项目中怎么将 一行中 两个按钮 居中

你可以使用 Flex 布局将这两个按钮居中。首先，将这两个按钮放在一个容器内，然后在该容器上应用 `display: flex` 和 `justify-content: center` 样式，即可将两个按钮水平居中。以下是示例 CSS 代码：

.container {
  display: flex;
  justify-content: center;
}

在 HTML 中，你可以这样写：

<div class="container">
  <button>按钮1</button>
  <button>按钮2</button>
</div>

这样，两个按钮就可以水平居中了。

相关问题

vue项目中怎么将 一行中 两个element 按钮组件 居中

同样可以使用 Flex 布局将两个 Element 按钮组件居中。以下是示例 CSS 代码：

.container {
  display: flex;
  justify-content: center;
}

在 HTML 中，你可以这样写：

<template>
  <div class="container">
    <el-button>按钮1</el-button>
    <el-button>按钮2</el-button>
  </div>
</template>

这样，两个 Element 按钮组件就可以水平居中了。需要注意的是，这里的按钮组件是 Element UI 提供的组件，需要先在项目中安装和引入 Element UI 库。

使用vue3+ts+setup语法糖+antdesign编写一个弹出框padding为10px，弹出框四边圆角为15px，标题为添加网址，另起一行有两个输入框一个按钮，左边输入框占四分之一四边圆角为10px，右边输入框占四分之二四边圆角为10px，按钮为白色字体蓝色按钮四边圆角为10px，另起一行标题为百度产品，另起一行写一个圆角为10px宽高为40px图标图标内容为新闻，图标旁有新闻两个字与图标同行都上下居中，并且一行有五个这个的图标和文字，编写以上要求的弹出框

好的，以下是您所需的代码：

<template>
  <a-modal :visible="visible" :title="title" @cancel="handleCancel">
    <div style="padding: 10px; border-radius: 15px">
      <div style="display: flex; align-items: center;">
        <div style="flex: 1; border-radius: 10px; background-color: #f5f5f5; padding: 5px;">
          <a-input placeholder="请输入" />
        </div>
        <div style="flex: 2; margin-left: 10px; border-radius: 10px; background-color: #f5f5f5; padding: 5px;">
          <a-input placeholder="请输入" />
        </div>
        <a-button style="border-radius: 10px; margin-left: 10px; background-color: #1890ff; color: #fff;">提交</a-button>
      </div>
      <div style="margin-top: 10px;">百度产品</div>
      <div style="display: flex; align-items: center; justify-content: space-between;">
        <div v-for="index in 5" :key="index" style="display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background-color: #f5f5f5;">
          <a-icon type="read" style="font-size: 20px; color: #1890ff; margin-right: 5px;" />
          <span>新闻</span>
        </div>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { Modal, Input, Button, Icon } from 'ant-design-vue';

export default defineComponent({
  components: {
    'a-modal': Modal,
    'a-input': Input,
    'a-button': Button,
    'a-icon': Icon,
  },
  props: {
    visible: Boolean,
  },
  emits: ['cancel'],
  setup(props, { emit }) {
    const title = '添加网址';

    const handleCancel = () => {
      emit('cancel');
    };

    return {
      title,
      handleCancel,
    };
  },
});
</script>

注意，由于 Ant Design Vue 的样式问题，可能需要在全局引入样式才能正常显示圆角和背景颜色等样式。

另外，如果您需要更改输入框和按钮的样式，可以在对应的 `<a-input>` 和 `<a-button>` 组件上添加 `style` 属性进行调整。