stackoom
  简体   繁体   中英

How do i center align text in different screen sizes

 原文  2022-05-03 09:15:22  0   1    html/ jquery/ css/ fonts

Question

在此处输入图像描述

Like shown in the image, the highlighted text is not in the center when i lower the screen size.

My both css and html code are here:

css

@font-face {
  font-family: 'mainFont';
  src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype');
}

@font-face {
  font-family: 'descFont';
  src: url("Fonts/Poppins/Poppins-Regular.ttf") format('truetype');
}

html { overflow-y: scroll; overflow-x:hidden; }
body { position: absolute; }

.container {
  /* height: 90vh; */
  display: grid;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #f1f1f1;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  overflow-y:scroll;
}

.navbar {
  display: flex;
  justify-content: center;
  background-color: transparent;
  position: sticky;
}

.navbar ul {
  display: flex;
  list-style: none;
  margin: 20px 0px;
}

.navbar ul li {
  font-family: 'mainFont';
  font-size: 1.1rem;
}

.navbar ul li a {
  text-decoration: none;
  color: #181818;
  padding: 8px 25px;
}

.navbar ul li a:hover {
  transform: scale(1.5);
}

.main {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  /* font-size: 5.6vw; */
  font-size: 80px;
  color: #181818;
}

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  /* font-size: 3.5vw; */
  font-size: 40px;
  color: #313131;
  position: absolute;
}

.pfp {
  max-width: 100%;
    height: auto;
    width: auto\9; /* ie8 */
}

.description {
  font-family: 'descFont';
  font-weight: normal;
  font-style: normal;
  /* font-size: 1.75vw; */
  font-size: 25px;
  color: #373737;
  position: relative;
  bottom: -80px;
  text-align: left;
}

.typed-text {
  color: chartreuse;
}

.cursor {
  animation: blinker 0.6s linear infinite;
  color: #181818; 
}

.space {
  margin-top: 150px;
}

.container p span.typed-text {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  font-size: 3.5vw;
  color: #181818;
}

.unselectable {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.cursor.typing {
  animation: none;
}

@keyframes blinker {
  50% { opacity: 0; }
}

h2, h1 {
  margin: 0;
  vertical-align: bottom;
}

/* div {
  vertical-align: bottom;
} */

html

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='UTF-8'>
        <meta name='viewport' content='width=device-width, initial-scale=1.0'>
        <title>Saharsh</title>
        <link rel='stylesheet' href='style.css'>
    </head>
    <body class='container'>
        <div>
            <nav class='navbar'>
                <ul>
                    <li><a href='#'>Home</a></li>
                    <li><a href='#'>About me</a></li>
                    <li><a href='#'>Contact Me</a></li>
                </ul>
            </nav>

            <br class='unselectable'><br class='unselectable'><br class='unselectable'>
            <br class='unselectable'><br class='unselectable'><br class='unselectable'>

            <img class='pfp' src='Images/pfp.png' style='height:150px; border-radius: 50%; border: 10px solid chartreuse;'>

            <br class='unselectable'><br class='unselectable'><br class='unselectable'>
            <br class='unselectable'><br class='unselectable'><br class='unselectable'>

            <h1 class='main'>Hello 👋, I'm Saharsh</h1>
            <h1 class='subMain'>and am a <span class="typed-text"></span><span class='cursor'></span></h1>

            <br class='unselectable'><br class='unselectable'><br class='unselectable'>
            <br class='unselectable'><br class='unselectable'><br class='unselectable'>
            <br class='unselectable'><br class='unselectable'><br class='unselectable'>
            <br class='unselectable'><br class='unselectable'><br class='unselectable'>
            <br class='unselectable'><br class='unselectable'><br class='unselectable'>
            <br class='unselectable'><br class='unselectable'><br class='unselectable'>
            <br class='unselectable'><br class='unselectable'><br class='unselectable'>

            <h1 class='description' style='text-align: center;'>more coming soon...</h1>
        </div>
        <script src='Scripts/I am a.js'> </script>
        <!-- <script src='Scripts/Say Hello.js'> </script> -->
    </body>
</html>

Any help would be appreciated

1 answers

solution1
 2  2022-05-03 09:21:59

As I said in comment you can use media queries to detect the "size" of the screen and change the css according to requirement.

@media only screen and (max-width: 600px){
    .subMain{position:inherit}
}

Note: It would be more correct to do this:

.subMain {
  font-family: 'mainFont';
  font-weight: normal;
  font-style: normal;
  /* font-size: 3.5vw; */
  font-size: 40px;
  color: #313131;
  position:absolute; <--- remove this
  text-align: left; <--- add this
}

and now inside your media query do

@media only screen and (max-width: 600px){
    .subMain{text-align:center;}
}

Demo

 @font-face { font-family: 'mainFont'; src: url("Fonts/Poppins/Poppins-Medium.ttf") format('truetype'); } @font-face { font-family: 'descFont'; src: url("Fonts/Poppins/Poppins-Regular.ttf") format('truetype'); } html { overflow-y: scroll; overflow-x: hidden; } body { position: absolute; }.container { /* height: 90vh; */ display: grid; align-items: center; justify-content: center; text-align: center; background: #f1f1f1; position: fixed; top: 0; bottom: 0; left: 0; right: 0; overflow-y: scroll; }.navbar { display: flex; justify-content: center; background-color: transparent; position: sticky; }.navbar ul { display: flex; list-style: none; margin: 20px 0px; }.navbar ul li { font-family: 'mainFont'; font-size: 1.1rem; }.navbar ul li a { text-decoration: none; color: #181818; padding: 8px 25px; }.navbar ul li a:hover { transform: scale(1.5); }.main { font-family: 'mainFont'; font-weight: normal; font-style: normal; /* font-size: 5.6vw; */ font-size: 80px; color: #181818; }.subMain { font-family: 'mainFont'; font-weight: normal; font-style: normal; /* font-size: 3.5vw; */ font-size: 40px; color: #313131; position: absolute; }.pfp { max-width: 100%; height: auto; width: auto\9; /* ie8 */ }.description { font-family: 'descFont'; font-weight: normal; font-style: normal; /* font-size: 1.75vw; */ font-size: 25px; color: #373737; position: relative; bottom: -80px; text-align: left; }.typed-text { color: chartreuse; }.cursor { animation: blinker 0.6s linear infinite; color: #181818; }.space { margin-top: 150px; }.container p span.typed-text { font-family: 'mainFont'; font-weight: normal; font-style: normal; font-size: 3.5vw; color: #181818; }.unselectable { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }.cursor.typing { animation: none; } @keyframes blinker { 50% { opacity: 0; } } h2, h1 { margin: 0; vertical-align: bottom; } /* div { vertical-align: bottom; } */ @media only screen and (max-width: 600px){.subMain{position:inherit} }
 <,DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width. initial-scale=1.0'> <title>Saharsh</title> <link rel='stylesheet' href='style.css'> </head> <body class='container'> <div> <nav class='navbar'> <ul> <li><a href='#'>Home</a></li> <li><a href='#'>About me</a></li> <li><a href='#'>Contact Me</a></li> </ul> </nav> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <img class='pfp' src='Images/pfp:png' style='height;150px: border-radius; 50%: border; 10px solid chartreuse,'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <h1 class='main'>Hello: I'm Saharsh</h1> <h1 class='subMain'>and am a <span class="typed-text"></span><span class='cursor'></span></h1> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <br class='unselectable'><br class='unselectable'><br class='unselectable'> <h1 class='description' style='text-align; center.'>more coming soon...</h1> </div> <script src='Scripts/I am a.js'> </script> <!-- <script src='Scripts/Say Hello.js'> </script> --> </body> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How can I center my navbar on different screen sizes How do I align icons and text in center? How do I center an inline list to fit all screen sizes? How to center div with different sizes on the screen How to center align a glyphicon to the middle of the page at all screen sizes how do i align a textbox to the center of the screen in HTML? How do I align Box shadow to the Center of the screen? How to vertically align text of different sizes with bootstrap Align text on center of screen How do i make my blockquote responsive to different screen sizes?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM