Vue.js 页面没有将我的所有内容集中在页面中

Question

Developing a viu.js page where I make requests to the back-end is 100% working well, but I'm trying to stylize the content in full page and in the centre, but I just can't centralize them all.

I have this simple code:

<template>
  <div class="container">
        <div class="left">
          <img src="../assets/GeeksBay-4.jpg" alt="logo" />
        </div>
        <div class="right">
          <nav>
            <li><a href="#">Login</a></li>
            <li><a href="#">Sign Up</a></li>
          </nav>
        </div>
      <div>
        <h1>GeekCentric</h1>
      </div>
      <div class="post-detail">        
        <form class="submit" @submit.prevent="submit">
          <input class="post" placeholder="Type your favourite topic..." v-model="message"/>
        </form>
      </div>
      <div class="postages list-group list-group-flush border-bottom scrollarea">
        <div class="list-group-item list-group-item-action py-3 lh-tight"
             v-for="message in messages" :key="message"
        >
          <div class="post-details col-10 mb-1 small">{{ message.message }}</div>
        </div>
      </div>
    </div>
</template>

<script>
import {ref, onMounted} from 'vue';
import Pusher from 'pusher-js';

export default {
  name: 'App',
  setup() {
    const post = ref('');
    const messages = ref([]);
    const message = ref('');

    onMounted(() => {
      Pusher.logToConsole = true;


      const pusher = new Pusher('068133b23cfaf634458b', {
        cluster: 'us3'
      });

      const channel = pusher.subscribe('chat');
      channel.bind('message', data => {
        messages.value.push(data);
      });
    });

    const submit = async () => {
      await fetch('http://localhost:8000/api/messages', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          post: post.value,
          message: message.value
        })
      })
      message.value = '';
      post.value = '';
    }

    return {
      post,
      messages,
      message,
      submit
    }
  }
}
</script>

<style scoped>
.container {
  background-color: #330624;
  padding: 10px;
  text-align: center;
  box-sizing: border-box;
}
.left {
  float: left;
  padding-bottom: 25px;
}
.right {
  float: right;
}
h1 {
  color: #fdb924;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.submit {
  margin-top: 45px;
  width: 100%;
}
.post-detail {
  margin: 1px;
  flex-direction: row;
}
.post-details {
  background-color: #330624;
  padding: 10px;
  box-sizing: border-box;
  color: #fff;
  font-size: 18px;
  border-bottom: 3px solid #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.postages {
  padding: 50px;
  box-sizing: border-box;  
  color: rgb(88, 88, 88);
  margin: 0 10px;
  border-bottom: 3px solid #ccc;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  flex-direction: row;
}
.scrollarea {
  min-height: 808px;
  margin: auto;
}
</style>

Maybe there's something I'm not able to see because I'm very new at vue.js, so I'm asking anyone's help, or maybe because I'm mixing bootstrap with some style codes, does it make any sense?

Answer 1

I set a header tag around your logo, page title and nav links. Got them displayed as flex, instead of floating the side objects. Then used your right and left classes to text-align them accordingly.

Also, inserted a section tag around the rest of the HTML code, so it gets easier to style and debug your code.

Later on, think about creating components to each section of your page, so you really take advantage of Vue.js framework.

This should do the job:

<template>
  <div class="container">
    <div class="main-bg">
      <header>
        <div class="left">
          <img src="../assets/GeeksBay-4.jpg" alt="logo" />
        </div>
        <div class="geek">
          <h1>GeekCentric</h1>
        </div>
        <div class="right">
          <nav>
            <li><a href="#">Login</a></li>
            <li><a href="#">Sign Up</a></li>
          </nav>
        </div>
      </header>
      <section>
        <div class="post-detail">        
          <form class="submit" @submit.prevent="submit">
            <input class="post" placeholder="Type your favourite topic..." v-model="message"/>
          </form>
        </div>
        <div class="postages list-group list-group-flush border-bottom scrollarea">
          <div class="list-group-item list-group-item-action py-3 lh-tight"
              v-for="message in messages" :key="message"
          >
            <div class="post-details col-10 mb-1 small">{{ message.message }}</div>
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import {ref, onMounted} from 'vue';
import Pusher from 'pusher-js';

export default {
  name: 'App',
  setup() {
    const post = ref('');
    const messages = ref([]);
    const message = ref('');

    onMounted(() => {
      Pusher.logToConsole = true;


      const pusher = new Pusher('068133b23cfaf634458b', {
        cluster: 'us3'
      });

      const channel = pusher.subscribe('chat');
      channel.bind('message', data => {
        messages.value.push(data);
      });
    });

    const submit = async () => {
      await fetch('http://localhost:8000/api/messages', {
        method: 'POST',
        headers: {'Content-Type': 'application/json'},
        body: JSON.stringify({
          post: post.value,
          message: message.value
        })
      })
      message.value = '';
      post.value = '';
    }

    return {
      post,
      messages,
      message,
      submit
    }
  }
}
</script>

<style scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
header {
  margin-bottom: 2vw;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header div {
  width: 33%;
}
.container {
  background-color: #330624;
  padding: 30px;
  text-align: center;
  box-sizing: border-box;
}
h1 {
  color: #fdb924;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.left {
  text-align: left;
}
.right {
  text-align: right;
}
.submit {
}
.post-detail {
}
.post-details {
}
.postages {
}
.scrollarea {
  min-height: 808px;
  margin: auto;
}
</style>

NOTE: I took out some classes that were not yet being used, so I could test it better.