Center both vertically and horizontally in Odoo's Qweb Reports

I'm attempting to center the content of the columns both vertically and horizontally in the following example code:

<div class="row">
   <div class="col-4 text-center align-middle">
      <img t-if="o.company_id.logo" t-att-src="image_data_uri(o.company_id.logo)" style="max-height: 60px;" alt="Logo"/>
      <div>A String</div>
   </div>
   <div class="col-4 text-center align-middle">
      <div>Another String</div>
   </div>
   <div class="col-4 text-center align-middle">
      <div class="panel-body" style="border: 1px solid black">
          <div>Panel title <t t-esc="o.company_id.field_1"/></div>
          <div>Factura N°: <t t-esc="o.field_2"/></div>
          <div>ORIGINAL</div>
       </div>
   </div>
</div>

So far, I have tried using classes like "row align-items-center", "col align-self-center", and "align-middle" as well as styling with "text-align:center;" but none seem to work. While "text-center" aligns horizontally, how can I achieve vertical alignment as well? Is this possible?

cssbootstrap-4odooqwebodoo-13

Answer №1

The vertical alignment challenge stems from the use of wkhtmltopdf.
When working with Odoo 15 and wkhtmltopdf 0.12.5 (with patched qt),
Applying style attributes to the parent div will effectively center the child content within p or span tags.

<div class="text-center" t-attf-style="display: -webkit-box; -webkit-box-pack: center; -webkit-box-orient: vertical;">
    <span t-field="o.text_field_to_be_centered"/>
</div>

While the standard method for vertical alignment is using flex, wkhtmltopdf does not recognize display: flex; as such.
To achieve vertical centering, all 3 -webkit-box attributes must be utilized.
Additionally, class="text-center" works well for horizontal center alignment.

Answer №2

To achieve vertical center alignment for an image in Odoo 16, I utilized this CSS style within the parent div:

style=" display: -webkit-box; -webkit-box-pack: center;  -webkit-box-orient: vertical;display: flex; justify-content: center;flex-direction: column; ">

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

The outcomes may vary even with identical fonts, character spacing, and line-height

When I first learned about @font-face in CSS3, I was excited about the prospect of using consistent fonts across all browsers. However, after experimenting with it using the code below on jsFiddle, my expectations were challenged: HTML: <div> T ...

htmlcss

Customizing tab menu functionality for specific click actions

I have created a simple HTML tab menu with JavaScript that allows for changing content when tabs are clicked. test.html <!DOCTYPE html> <html> <head> <title>My Menu Test</title> <style type="text/css" media="all"& ...

javascriptjqueryhtmlcss

Fixed width div displaying too large on iPad screens

Seeking to enhance the performance of a specific webpage on iPad, I have conducted a test. To view the test-page, please click on this link: The page includes a black box with a width set at 800px. However, upon viewing it on my iPad and taking a screensh ...

htmlcssipad

Why does the javascript code in AngularJS2 fire too early and appear to not be functioning properly?

I am facing an issue with my JavaScript script. Even though I have experience in programming with JavaScript before, this problem seems to be new. I am currently working on a website using Angular and JavaScript, but it's not functioning properly. Fir ...

javascriptangularjshtmlcss

Position the image alongside the bulleted list

I created a product description using Bootstrap. I am trying to align the text with the image, but floating left didn't have the desired effect. The image is too large, so I want it to be vertically aligned. Here is a link to a pen where you can see m ...

htmltwitter-bootstrapcss

Unable to navigate to specific tab in Laravel 6 navigation tabs using URL parameter (e.g. myweb/pages#tab1)

I'm having trouble navigating to the tabs pages, they only show up in the URL (myweb/pages#tab1 .. myweb/pages/#tab2 ..). Can someone please help me out? View image <div class="card-body"> <ul class="nav nav-tabs" id="myTab" role="tabli ...

htmllaravelbootstrap-4navbar

Creating a unique checkbox design using pure CSS and HTML

I'm looking to design a customized checkbox using just HTML and CSS. Here's what I have so far: HTML/CSS: .checkbox-custom { opacity: 0; position: absolute; } .checkbox-custom, .checkbox-custom-label { display: inline-block; vertica ...

htmlcsscheckboxinputpseudo-element

Can you provide instructions on how to center a button on a webpage?

Utilizing twitter bootstrap and its cover example as a foundation, I have incorporated additional input fields and am striving to center the second one (email) horizontally. Despite my attempts to use .center-block and .text-center on various div elements, ...

htmlcsstwitter-bootstraptwitter-bootstrap-4bootstrap-4

Getting rid of the border on a material-ui v4 textbox

I am currently using Material-UI version 4 and have not upgraded to the latest mui v5. I have experimented with various solutions, but so far none have been successful. My goal is simply to eliminate or hide the border around the textfield component. < ...

cssreactjsmaterial-ui

Incorporating a popover onto a button within an Angular-centric project

Having recently delved into Angular, I decided to create a basic page showcasing details of a legal case. To enhance the visual appeal, I incorporated Angular Material library for its attractive icons, which I intended to display alongside plaintiff and se ...

javascriptangularbootstrap-4tooltip

Are you seeking precise parsing for PHP, JavaScript, and CSS?

As I work on developing bottom-up parsers for PHP, JavaScript, and CSS, I aim to create a universal parser that can handle all three languages. I've come across information suggesting that JavaScript could be parsed using an LALR(1) parser (please cor ...

phpjavascriptcssparsing

Steps for showing the text entered into the input box as soon as it is typed:

I am attempting to create a feature where text is displayed as soon as it is typed into an input box. Currently, my JavaScript function is not working at all. I simply want the function to display text when it is typed into or erased in the text boxes. & ...

javascripthtmlcssformsinput

Tips for incorporating transition animations into route changes in next.js

On the homepage, there are 2 links that I want to have distinct transition animations for. For example, if I click the link on the left, the animation should start from the left and move towards the right when changing routes. ...

cssreactjsanimationnext.js

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

I have been experimenting with Bootstrap's Example accordion code, which can be accessed via this link: http://jsfiddle.net/qba2xgh6/18/ <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel ...

javascriptcsstwitter-bootstraptwitter-bootstrap-3

The div element should only be hidden on mobile devices

I've been attempting to hide a div on mobile devices using a media query, but unfortunately, it's not working as expected. When I resize the window smaller than (min-width: 1224px), the content disappears instead of being hidden. Here is a snipp ...

htmlcssmedia-queries

Combine linear and radial background effects in CSS styling

I am trying to achieve a background design that includes both linear and radial gradients. The linear gradient should display a transition from blue to white, while the radial gradient should overlay a polka dot pattern on top of it. I have been following ...

htmlcssbackgroundlinear-gradientsradial-gradients

Reset all divs to their default state except for the one that is currently active using jQuery

Here's the plan for my script: Once a user clicks on a "learn more" button, it will reveal the relevant information in the corresponding box. I'm aiming to implement a feature where if you click on another "learn more" button while one box is a ...

javascriptjquerycsscss-selectors

Why is the Slick Slider displaying previous and next buttons instead of icons?

I'm currently working on creating a slider using the slick slider. Everything seems to be functioning properly, but instead of displaying arrows on the sides, it's showing Previous and Next buttons stacked vertically on the left side. It appears ...

javascripthtmljquerycssslick.js

Cannot get the arrow to rotate using Jquery's css() function

Having trouble using css() to rotate my arrow $(function() { $("#arrowAnim").css("transform:","rotate(300deg)"); }); Check out the fiddle here: https://jsfiddle.net/u4wx093a/10/ I've looked for similar issues but can't seem to solve it on my o ...

javascriptjquerycss

I require a browse button on my JSP page that allows users to select folders, not individual files

In search of ideas for my JSP page, I am looking to browse a folder rather than just a file. Can anyone assist with this requirement? ...

javascripthtmlcssjsp