Question 14955 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

How to move a <p> element to the upper part of another <div> element and make it display vertically? – Jquery

I have some html code like this on JSFiddle:

<!-- index.html -->
<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>

and here’s the css code of the above html:

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

#my_title {
  text-align: center;
}

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

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

Currently, it displays my_title, my_mark, and my_text in this way:

enter image description here

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.

enter image description here

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

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0 
    #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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search