Introducing a new feature that allows automatic line breaks when using the detail

Looking to achieve centered text for a summary where the arrow, when clicked, reveals additional details. However, currently, the text and arrow are on separate lines.

The goal is to have the arrow on the same line as the summary text and perfectly centered together. The details should then be aligned to the left.

Desired Outcome: https://i.stack.imgur.com/9ykDc.png

Possible Solutions:
Several attempts were made in the source code, but all resulted in an extra line break after the arrow. 

    .center {
        text-align: center;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
<p>
  <details>
        <summary>
            <div class="center">
               Some summary in center
            </div>
        </summary>
        <div>
            <p>
               Some more details
            </p>
        </div>
    </details>
</p>

https://i.stack.imgur.com/Bzu1m.png

htmlcss

Answer №1

Place the .center class within the <summary> tag:

.center {
    text-align: center;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
<details>
    <summary class="center">
           Summary centered here       
    </summary>
        <p>
           Additional details
        </p>
</details>

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

Align a child element to the top and another child element to the center within a flexbox column

Struggling with flexbox column and can't find a solution online! The problem: I have a full-height flex-column on the right side of my viewport with two elements (headset icon and hangup button). Trying to vertically align them - first element at top ...

cssflexboxbootstrap-4

The perplexity of CSS Menus

I have this HTML code, but I'm not sure how to write the CSS so that the drop-down menu appears when I hover over the main li. <li><a href="#">#</a> <ul class="sub_menu"> <li><a hre ...

htmlcss

Unexpected results from the match() function

Attempting to utilize the RegExp feature in Javascript (specifically with the match function) to locate instances of a sentence and a specific word within that sentence embedded in the HTML body. Provided is some pseudo-code for reference: <!DOCTYPE ...

javascripthtmlregexmatch

I am facing an issue where my Popover functions correctly when elements are added using HTML, but not when they are dynamically created

I'm currently working on a method to incorporate multiple popovers that have a similar appearance to the following: The screenshot of my first JsFiddle project (click to view) The initial progress I've made can be seen in my first JsFiddle, acc ...

javascriptjquerycssbootstrap-4jsfiddle

CSS - Safari has trouble properly implementing clip-path

I'm currently working on a shape-based menu, but I'm encountering issues specifically in Safari. The layout gets distorted in Safari, and I'm struggling to understand the cause. Interestingly, when I use CSS clip-path without the SVG tag, it ...

htmlcsscross-browsercss-shapes

Styling an HTML Table with CSS to Add Cell Padding

I am trying to add padding to a single cell in my table. I created a class for the td element and specified its style in my CSS file as shown below: .itemQuantity { padding-right:30px; text-align:right; background-color: #EEE; } However, the ...

htmlcsshtml-tablecellpadding

How can you position text to the right of an image using CSS?

Trying to right-align text next to an image; CSS .p1 { position: absolute; width: 100px; height: 50px; top: 40%; left: 70%; } HTML <img src=../images/diagram1.png alt="Diagram"/> <span class="p1">This is a tes ...

csshtml

variance in efficiency when retrieving a DOM element

While this may not make much of a difference for smaller, simpler DOM elements, the performance impact could be significant when dealing with larger, more complex ones. Is there a noticeable performance gap between storing an element in a variable and cons ...

javascriptjqueryhtmldom

The dilemma of calculating the total width of jQuery's list items

I am in the process of creating a submenu that should look like this: HTML: <ul class="mainMenu clearfix"> <li><a href="#">Eurodan huset</a></li> <li><a href="#">Hustyper</a></li> <li&g ...

jquerycss

Creating a water vessel design using CSS

Despite going through the JS tutorial, I still struggle with it and need some assistance. I believe using a jsfiddle would be helpful. I am attempting to use JS to create a small box that changes color from green to empty based on the fullness of a "wate ...

javascriptjquerycss

inactive toggle being released

I am facing an issue with my two slider menus, where only the right menu holds the active value when clicked. The left menu slides out only when the toggle button is held down, but I need it to slide out when the toggle is simply clicked and not held down. ...

jqueryhtmlcss

Trouble with highlighting the chosen menu item

I have been attempting to implement this code snippet from JSFiddle onto my website. Although I directly copied the HTML, used the CSS inline, and placed the Javascript in an external file, the functionality does not seem to be working properly. Feel free ...

javascriptjqueryhtmlcss

Utilizing document.write to switch up the content on the page

Every time I attempt to utilize document.write, it ends up replacing the current HTML page content. For instance, consider this HTML code: <body> <div> <h1>Hello</h1> </div> and this jQuery code: var notif = document. ...

javascriptjqueryhtml

I am trying to retrieve the class name of each iframe from within the iframe itself, as each iframe has a unique class name

My index HTML file contains multiple Iframes. I am trying to retrieve the class names of all iframes from inside an iframe. Each iframe has a different class name. If any of the iframes have a class name of 'xyz', I need to trigger a function. I ...

javascriptjqueryhtmliframe

Main Article Holder containing Image overlaid with Post Details

I'm struggling to achieve something seemingly simple but can't quite get it to work. My goal is to display article previews on my website in a tiled format. For example, the tiles would have a fixed height and width, say 300px by 300px. I&apos ...

htmlcss

What is the best way to remove column and row gaps in a Bootstrap grid system?

Despite adjusting padding with the image, div section, and grid gap to 0px in the grid layout, the image still fails to cover the entire cell. I am seeking a solution to eliminate these unwanted paddings that are highlighted in blue. The Bootstrap 5 .g-0 ...

htmlcssbootstrap-5

Adding app stylesheet in Django

I'm a bit unsure about how to incorporate CSS into my HTML. I have an app within my project that has its own template folder, and I would like to include the sample.css file in my HTML. I think it should be something like this: <link rel="styleshe ...

cssdjangodjango-templatesstatic-files

Tips for inserting a PHP array into an email communication

I have a question regarding sending emails through PHP. How can I include PHP arrays in the message section of an email? Here is a simple array that I created and attempted to include in the email, but it seems incorrect as I couldn't find any releva ...

phphtmlarraysemail

What is the method for writing to an HTML file with the use of expressjs?

Alright, I have an interesting idea here. I am looking for a way to allow users to push a button and have a new p element permanently added to the HTML file. This means that even after reloading the page, everyone should be able to see this new element. An ...

javascripthtmlcssnode.jsexpress

The Bootstrap Grid Leaves Blank Spaces Unfilled

View the screenshot here Take a look at the image above. I'm struggling to fill the empty space with div elements. I've experimented with display:inline-block and other display properties, but they haven't yielded the desired results. < ...

htmlcssbootstrap-4