How to move a <p> element to the upper part of another <div> element and make it display-CodePudding

I have some html code like

How can I move the Chinese characters to the upper part the the red circle, and display them vertically?

Here's the result that I'd like to achieve.

How can I set some properties to my_title so that it displays vertically and stays at the top of the red circle?

CodePudding user response：

You can just set the writing-mode property to vertical-rl

Here is the full code:

#my_container {
    width: 300px;
    height: 300px;
    background: lightblue;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
}

#my_title {
    text-align: center;
    writing-mode: vertical-rl;
}

#my_mark {
    width: 40px;
    height: 40px;
    background-color: red;
    border-radius: 50%;
}
.my_text {
    text-align: center;
    width: 200px;
}

<div id="my_container">
    <p id="my_title">這是中文</p>
    <div id="my_mark"></div>
    <p id="my_text">2022-12-08 13:15</p>
</div>

I did some small changes in the div, so it can show the result as you want.

CodePudding user response：

#my_container {
  height: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  top: 70%;
  padding: 10px;
}


#my_title {
  text-align: center;
  width: 20px;
}

#my_mark {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
  margin-top: -10px;
  margin-bottom: -10px;
}

.my_text {
  text-align: center;
  width: 200px;
}

<div id="my_container">
  <p id="my_title">這是中文</p>
  <div id="my_mark"></div>
  <p id="my_text">2022-12-08 13:15</p>
</div>

You can easily do that by setting the width to be 20px, for the text.