Create a text container that adjusts its size based on the content within

My goal is to create a unique display using CSS:

I want to add various texts and lines to fill in the white space on the left and right sides.

I have made some progress with this http://jsfiddle.net/g5jtm/, but I am facing a few issues:

  1. The text width varies and removing width:40%; affects the other 2 lines
  2. The display:table property does not allow me to vertically align the lines in the middle of the text

Example HTML structure:

<div class="container">
    <div class="lines l1"></div>
    <div class="copy">Consumer review</div>
    <div class="lines l2"></div>    
</div>

Example CSS styles:

.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy  {display:table-cell;vertical-align: middle;width:auto; }
.copy {  white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
.l1,.l2 {border-bottom:1px solid red; height:50px; }
cssalignment

Answer №1

Check out this cool technique using pseudo-elements

See the Codepen Demo Here

HTML

<div class="container">
  <h1 class="line">Customer Feedback</h1>
</div>

CSS

.container {
  width:50%;
  margin:0 auto;
}

.line {
  display: table;
  white-space: nowrap;
}

.line:before,
.line:after {
  background: linear-gradient(to bottom, #9FD35F, #4F8C31) no-repeat center / 98% 3px;
  content: '';
  display: table-cell;
  width: 50%;
}

Answer №2

Ever considered using a horizontal line tag in your HTML code?

Here's an example:

<div class="container">
<div class="lines l1"><hr></div>
<div class="copy">Consumer review</div>
<div class="lines l2"><hr></div>    
</div>

And the associated CSS:

.container {width:100%; display:table; position:relative; height:100px;}
.lines, .copy  {display:table-cell;vertical-align: middle;width:auto; }
.copy {  white-space: nowrap; padding:3px; text-align:center; font-size:24px; width:40%;}
hr {color:red}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Display issues with CSS Absolute Positioning in IE11

I have encountered an issue with my html and css code that uses absolute positioning. While it functions correctly on Chrome and Firefox, I am facing a problem with Internet Explorer. The absolute position property in the SVG class does not seem to work in ...

htmlcss

Tips for maintaining space beneath an image when text wraps around it

.blogimgarea { width: 38%; padding-right: 26px; float:left; } img{max-width:100%} .blogtextarea { width:55%; padding:22px 32px 0 0; float:right; } <div class="newpostregion pt70"> <div class="blogimgarea"> <img class="featblogimg" src="https ...

javascriptjqueryhtmlcss

Having trouble applying CSS styles to an element using JavaScript

Hello, I have an unordered list with some list elements and I am trying to apply a CSS style to highlight the selected list element. However, the style is not taking effect as expected. function HighlightSelectedElement(ctrl) { var list = document.ge ...

javascripthtmlasp.netcss

verifying the user's screen dimensions

I'm currently exploring ways to customize the appearance of my website based on the viewer's screen resolution. I am interested in potentially optimizing the layout for vertical screens on mobile devices, and horizontal screens for laptops. Addit ...

javascripthtmlcsswebbootstrap-5

Expanding Images with JQuery Accordion

I'm facing a problem where I need to include accordions on my website with images, but whenever the accordion is opened, the image ends up stretched. Is there a solution to prevent this from happening? Below is the code snippet I am using: [Fiddle] ...

jqueryhtmlcssaccordion

Popover disappears when scrolling the page, but its position remains constant in Angular 4+

After clicking on an icon, a popover appears. I've noticed that the popover has a delay set, but when I scroll, the popover also moves along with it. Is there a way to keep the popover in place and not have it affected by scrolling? <md-badge cla ...

htmlcssangularpopover

Steps for Adding a class or Id to an Ext.Msg.alert box

Is there a way to customize the style of a specific Ext alert box without affecting all alert boxes? Can someone please explain how to assign a class or ID to an Ext.Msg.alert box? Ext.Msg.alert('Status', 'Changes saved successfully.' ...

javascriptcssextjs

Optimizing CSS for printing with margins and overflow

After stumbling upon a helpful solution here, I wanted to print small cage cards in a neat format with some tweaks of my own. Currently, this is how it appears for me (Fiddle): /* CSS styles */ (styles modified here) * { -moz-box-sizing: border-b ...

htmlcssprinting

The primary tab's background color in a Shiny app

I had this question deleted previously while I was in the process of refining it. Is there a way to customize the background color of the active tab in a Shiny app? library(shiny) ui <- fluidPage( tags$head( tags$style(HTML(css)) ), tabsetP ...

htmlcssrshiny

Retrieve the matrix3d values from the -webkit-transform property

My current endeavor involves rendering 3D shapes using the <canvas> (2d context), requiring manual projective transformations. I am eager to retrieve the 3D transformation matrix values from the CSS, as that would greatly aid my process. Is it poss ...

javascripthtmlgraphicscss3d

What is the best way to create a column that adjusts its width based on the row width in a table?

Here is the code snippet that I am working with: return ( <Box sx={{ height: 400 }}> <DataGrid columns={columns} rows={rows} /> </Box> ) Currently, my table appears like this: https://i.sstatic.net/KWXwL.png I am aiming for the ...

cssreactjsmaterial-ui

What is the best way to ensure the image is centered on smaller screens for responsive design?

Greetings from a budding web developer seeking guidance... I've been grappling with positioning the image of a dog inside an iPhone frame at the center when the screen size is reduced (small to medium sizes) to enhance its appearance. Despite my effo ...

htmlcssresponsive-designfrontendbootstrap-5

What is the best way to incorporate code into a page with numerous conflicting CSS styles, without resorting to Scoped CSS?

Struggling to incorporate tab code into a page with conflicting CSS? Even after attempts to edit classes and labels, the original code fights back against the new additions. While scoped CSS seems like the perfect fix, it's not widely supported yet. ...

htmlcssmerge

Menu items on the responsive design are vanishing

I am facing an issue with my sample menu layout. It appears fine on desktop view, but when I switch to a smaller window size of 480px, the items from About to Contact disappear when I hover away from the last item in the .has-children class. It seems like ...

htmlcss

choosing and identifying the iframes for YouTube videos

I have a webpage that showcases images of YouTube videos, allowing users to choose from them. This is how I am presenting them: <ul> <li> <div class="youtubeMediaContainer"> <img src="video_preview_image1.jpg"& ...

htmlcssiframeyoutube

Stopping jQuery fadeOut from setting the display property to 'hidden'

I am currently working on a project that involves creating a lightbox effect. I am using jQuery's fadeIn and fadeOut functions to display enlarged div elements. However, I have encountered an issue - when I use fadeOut on the enlarged div, the smaller ...

jqueryhtmlcss

Can the Browser width/document width be maintained when shrinking the browser window size?

https://i.stack.imgur.com/a4gfA.pngLooking for a solution to maintain the browser/document width at 350px, preventing users from minimizing the window. The desired width is actually 400px, not 350px. Please refer to the image above. I require the window ...

javascriptjqueryhtmlcsstwitter-bootstrap

Guide on showcasing an alert notification when the data is already existing within an array through javascript

Need help with displaying an alert message in JavaScript for duplicate values in an array? var names = []; var nameInput = document.getElementById("txt1"); var messageBox = document.getElementById("display"); function insert() { names. ...

javascripthtmlcss

What is causing jQuery toggleClass to fail in removing a class?

I have successfully implemented a Skills accordion feature, but I am now trying to add a button that toggles all the skill sections at once. However, I am facing issues with jQuery not correctly adding or removing classes on the .accordion-trigger-all elem ...

javascripthtmljquerycss

Is there a way to align a button in the center of the browser's footer?

Removing these two elements will enable the image to display properly, however, it does not stay aligned with the footer when viewed in a browser. Here is a preview of how it looks: Below is the CSS code along with the HTML: <style> body { ...

javascriptjqueryhtmlcss