CODEWITHSUNDEEP
vuetify.js
泰偉張
泰偉張

Reputation: 41

How can I align content to right inside v-col?

In the document, justify-** and align-** are design for determine where the grid block should be placed, but how can I make the content inside the v-col align to right?

Upvotes: 4

Views: 19399

Answers (3)

Rob Gray
Rob Gray

Reputation: 3266

Bit late to this. I came here for a solution and ended up RTM. align="right" doesn't work for all components inside v-col. The way to left/right/center align is to use v-spacer. If you want to right align, add a v-spacer to the left of your component inside of v-col. v-col also needs d-flex class.

<v-app>
  <v-container>
    <v-row>
      <v-col cols="8">
      </v-col>
      <v-col class="d-flex" cols="4">
        <v-spacer />
        <!-- insert any other content here to right align inside this col -->
      </v-col>
    </v-row>
  </v-container>
<v-app>

You can also add the class .text-right if you're trying to align a button or text

Upvotes: 7

Tim S.
Tim S.

Reputation: 266

Here is a small example that aligns content to the right inside v-col (in this case a close button):

<v-row>
    <v-col align="right">
        <v-btn color="error">X</v-btn>
    </v-col>
</v-row>

Or with multiple columns:

<v-row>
    <v-col cols="9">
        <h2>Title</h2>
    </v-col>
    <v-col cols="3" align="right">
        <v-btn color="error">X</v-btn>
    </v-col>
</v-row>

So you simply need to add

align="right"

as a parameter at v-col to align content to the right side within a v-col.

Upvotes: 14

Alan Zhiliang Feng
Alan Zhiliang Feng

Reputation: 2012

According to the code of the Playground example in Vuetify's Grid System page, you could put an EXTRA v-row inside your v-col, and use justify-** in this newly added v-row. E.g.:

<v-app>
  <v-container>
    <v-row>
      <!-- first column -->
      <v-col cols="8">
        <!-- the extra row -->
        <v-row justify="center">
          <p>Your Content</p>
        </v-row>
      </v-col>
      <v-col cols="4">
        Second column
      </v-col>
    </v-row>
  </v-container>
<v-app>

Or, if the v-col is the ONLY column in your first-level v-row, you MAY get rid of that, just put your content in the v-row to which you can apply the justify. E.g.:

<v-app>
  <v-container>
    <v-row justify="center">
      <p>Your Content</p>
    </v-row>
  </v-container>
<v-app>

Upvotes: 0

Related Questions