CSS attribute that expands in all directions from the center of the parent element until it hits the edge of the screen

Question

CSS attribute that expands in all directions from the center of the parent element until it hits the edge of the screen

.rightDiv {
    position: absolute;
    right: 0;
    height: 80px;
    width: 350px;
  }
  
  .content{
   width:50%; 
    position:relative;
    margin:auto;
    padding:0px;
    text-align:center;
    top:10px;
  }
  
  #spandiv {
    display: block;
    font-size:16px;
    background-color: #232F34;
    color:#FFFFFF;
    opacity:1;
    top:5px;
    overflow-wrap: break-word !important;
  }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="test.css"/>
</head>
  
<body>
  <div class="rightDiv">
    <input type="text"/>
    <div class="content">
        <p id="spandiv">10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
      </div> 
  </div>
</body>
</html>

I am a beginner in CSS and I am seeking a style property that can expand text in both directions from the center of its parent element to the end of the screen. If such a property doesn't exist, is it possible to create a custom style? I am facing some challenges in my project and I want the UI to match the design shown below.

https://i.sstatic.net/SZn9G.png

html css

Answer 1

Answer №1

Here is a sample code snippet for your reference:

Demo

        .mainDiv {
            height: auto;
            width: 100%;
            float: left;
            text-align: center;
        }
        
        .content {
            width: 100%;
            position: relative;
            margin: auto;
            padding: 0px;
            text-align: center;
            top: 10px;
        }
        
        .content p {
            font-size: 16px;
            line-height: 18px;
            background-color: #232F34;
            color: #FFFFFF;
            overflow-wrap: break-word;
            padding: 15px 10px;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <title>StackOver flow</title>
    
</head>

<body>
    <div class="mainDiv">
        <input type="text" />
        <div class="content">
            <p>10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
        </div>
    </div>
</body>

</html>

Answer 2

Here is a sample code snippet for your reference:

Demo

        .mainDiv {
            height: auto;
            width: 100%;
            float: left;
            text-align: center;
        }
        
        .content {
            width: 100%;
            position: relative;
            margin: auto;
            padding: 0px;
            text-align: center;
            top: 10px;
        }
        
        .content p {
            font-size: 16px;
            line-height: 18px;
            background-color: #232F34;
            color: #FFFFFF;
            overflow-wrap: break-word;
            padding: 15px 10px;
        }

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
    <title>StackOver flow</title>
    
</head>

<body>
    <div class="mainDiv">
        <input type="text" />
        <div class="content">
            <p>10122019(tjwmxuwmiihcxdfryfgfhrunlfsxrkhvmyqjjuwjddknjaybnrobpzferxaenxzenbkmlqqzesvfbnnsxwydfbzgbaxkccvoplgjxbikxjifojjmvqxmbjbrtmvbngq)</p>
        </div>
    </div>
</body>

</html>

Answer 3

Answer №2

Unusual request, but consider the following: create a parent element with specific width and height, then set the child element to be absolute positioning with left: 0 and right: 0 to center it within the parent:

#parent {
    width: 500px;
    height: 150px;
    border: 4px solid;
    margin: auto;
}

#child {
    text-align: center;
}

<div id="parent"></div>

<div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

Answer 4

Unusual request, but consider the following: create a parent element with specific width and height, then set the child element to be absolute positioning with left: 0 and right: 0 to center it within the parent:

#parent {
    width: 500px;
    height: 150px;
    border: 4px solid;
    margin: auto;
}

#child {
    text-align: center;
}

<div id="parent"></div>

<div id="child">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

CSS attribute that expands in all directions from the center of the parent element until it hits the edge of the screen

Answer №1

Answer №2

Similar questions

What is the best way to dynamically generate a consistent margin or padding between two sections on different screen sizes?

Breaking xPath data apart by new lines

Having trouble with jQuery hover and AJAX loaded content not functioning properly?

What steps can I take to avoid horizontal scrolling on mobile due to a table overflowing?

Angular 6 - implementing a dynamic carousel with bootstrap styling

What is the significance of a colon appearing at the start of HTML attribute names in a Vue template?

Tips for making a DIV span the entire width of a page when it is within a column with the Bootstrap class 'col-md-6'

A guide on retrieving the value of input elements using class names in jQuery

Failure occurred when attempting to link and display on the page container

Are there automatic margins in the top side navigation bar?

Interference in the output of .innerHTML leads to disruption

Choose an option from the drop-down menu and transfer the selected value to the following page using a hidden

What is the process for executing a Js file on a website?

Conceal a div using jQuery when clicked

Having trouble loading @font-face fonts

.display() and .conceal() functions malfunctioning

How to select text based on its color property using Watir in Ruby

Obtaining visuals in a specific manner

inserting various values from a web form

What is the best way to access the CSS resources within the designated Area section of an MVC project?