Is there a way to keep an image centered while using bootstrap 3.0?

Can anyone help me figure out why the image at the center keeps moving when resizing the window in Bootstrap 3.0? Here is my current HTML code:

    <div class="text-vertical-center">
        <img id="output" class="img-responsive img-center" src="http://s15.postimg.org/seg9dex3f/output2.png" alt="">
        <h3>This is some cool text</h3>
        <br>
        <button type="submit" class="btn btn-success">
            <i class="fa fa-envelope-o fa-fw fa-2x"></i>
        </button>
    </div>

Here is the CSS I have applied to the image:

#output{
    display: table;
    position: relative;
    padding-left: 35%;
}

I had to set the padding to 35% to center the image in a full-screen window, but it starts moving when resizing the window. Any suggestions on how to fix this issue would be greatly appreciated. Thank you.

htmlcss

Answer №1

What benefits does applying display: table to an image bring?

Instead, consider changing it to display:block, eliminating the need for padding, and including margin: auto.

Answer №2

another option to consider is

#result{
  width:350px;
  max-width: 90%; 
  position: absolute; 
  left: 40%; 
  -webkit-transform: translate(-40%, 10%); 
  transform: translate(-40%, 10%);
}

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

Rearranging HTML elements using jQuery

I have a collection of 5 HTML elements <a href="#"><img src="image1.jpg" /></a> <a href="#"><img src="image2.jpg" /></a> <a href="#"><img src="image3.jpg" /></a> <a href="#"><img src="image4.j ...

jqueryhtmlsorting

What is the best way to create a sliding menu that appears from the right side on a mobile device using HTML, CSS, and JQuery

Is there a way to have the menu slide in smoothly from the right side after clicking on the menu bar icon, including sliding the menu bar icon itself? The current code displays the menu directly upon clicking on the menu bar, but I would like it to slide i ...

javascriptjqueryhtmlcssmenu

Using 2 viewports depending on the device

My website looks great on all devices and desktop, but I want to set a different viewport for iPad. I would like the iPad to have the same width as my desktop version, which is 1100px wide. Currently, the site is designed with percentages and ems up to (ma ...

cssipadviewport

I need the PHP code to ensure that only checkboxes can

I keep encountering what seems like a simple issue in my html form with checkbox groups. I am trying to ensure that at least one checkbox is selected from each group, and if not, display an error message using PHP code. However, despite multiple attempts, ...

phphtmlmysql

Transform or retrieve information from input into unformatted text

I'm working on a JavaScript function that can convert input values to text. However, I am facing an issue as I only want to convert data from one specific row into plain text. Each row in my table has 5 cells along with a button for saving the data. I ...

javascriptjqueryhtml

What is the best way to align a dropdown menu in Bootstrap 5?

When working with Bootstrap, I discovered two classes, 'dropdown-menu-end' and 'dropdown-menu-start', that almost perfectly suit my needs for a dropdown menu. However, what I truly desire is to have the dropdown menu centered on the web ...

cssdrop-down-menubootstrap-5

Adjusting the size of <nav> element to accommodate its child elements

I've exhausted all possible CSS solutions today in an attempt to make my parent nav tag home-main-nav-menu resize based on its children and grandchildren, but it just won't cooperate. If anyone could provide a clear explanation on how to solve th ...

javascripthtmlcss

What is the best way to alter the header in Django when a user is authenticated?

In my project, I have two headers: header.html and headersuccess.html. When a user is logged in, I need to change the header from header.html to headersuccess.html. How can I implement that? Here is an excerpt from my views.py file where I render loginsuc ...

javascriptpythonhtmldjangovue.js

Transform an xlsx document into a HTML file using VBscript or batch script

After extensive research, I have come up empty-handed in finding a solution to the issue I am facing. The problem at hand is that I have an Excel file in .xlsx format that needs to be converted to .html on a regular basis throughout the day. Once converte ...

htmlexcelbatch-filevbscriptxlsx

Creating multiple autocomplete fields using HTML5 and MySQL can greatly enhance user experience on your website

Looking to streamline the data entry process into a MySQL database, I am creating a simple HTML input page. To make input faster, I want to incorporate autocomplete fields. After finding a helpful script here and making some adjustments, the code now looks ...

phpmysqlhtmlautocomplete

The form-group nested within a form-horizontal is exceeding the boundaries of the preceding form-group

I am currently utilizing Bootstrap 3.3.6 and have a basic form enclosed in a panel: https://i.stack.imgur.com/UOFI6.png Although it is quite simple, the alignment of the "Post" button is not displaying properly. Here is the HTML code for the form: < ...

htmlcsstwitter-bootstrap

The ZK Component fails to display within the HTML tag

In my dilemma, I am attempting to showcase a hyperlink component under an HTML tag along with some instructions for click functionality: <zk> <html> <a label="show me" onClick="@command('showMe')" /> </html> </zk ...

htmlzk

The datatable does not adjust to changes in page size

My jsfiddle example showcases different card boxes, and I am currently focusing on making the 'Table 1' box responsive. However, I have encountered an issue: Check out my jsfiddle example here code If you open the jsfiddle with a large enough ...

javascripthtmlcssbootstrap-4datatable

Always take the lead with the first image in navigation

Looking to add an image to your website navigation? Want the image to appear at the beginning of the navigation bar, before Link 1? Here's a bit of CSS code for you: <div class="topnav"> <img src="https://cdn.mos.cms.futurecdn ...

htmlcssimagenavigation

The select dropdown default choice is not appearing as expected

My template is not showing the default select option that I have set for one select element. I attempted to achieve this with the following code: <div class="select"> <select (change)="calculaMes(mesEscolhido)" [(ngModel)]="mesEscolhido" na ...

htmlcssangular

When I click on the button, the output does not appear

Even though I know how to write this in pure javascript, I am new to angular so when I click submit, nothing happens and I don't get any result. index.html <input type="text" ng-model="username" placeholder="Username"> <input type=" ...

javascripthtmlangularjsangular

Converting uploaded file data into JSON format using JavaScript

I am currently loading a JSON data file, however the data is being read as a string. I am attempting to convert this string into a JSON object using JSON.parse, but it still remains as a string. Here is the content of the JSON file: { "annotations": ...

javascriptjqueryhtmljson

Prevent using href for opening the browser when clicked

In the control, there is an href link that triggers a javascript function and passes a variable to it: <a href="<%#XPath("link").ToString()%>" onclick="return getLink(this)">Link</a> I'm looking for a way to prevent the browser fro ...

javascripthtmlhref

Double Row Navbar Struggles in Bootstrap 4

I have been experimenting with creating two bootstrap navbars. The first one features the website's domain name in the center, accompanied by a dropdown menu to navigate to other sections. Each of these sections has its own subbar containing specific ...

htmlcssbootstrap-4navbar

AngularJS's support for html5mode on GitHub pages is now available

Is it feasible for GitHub pages to accommodate AngularJS in html5mode? I came across a source online suggesting that it can be done with a fallback page for 404 errors. However, this solution seems flawed as it may result in multiple 404 errors, which wou ...

javascriptangularjshtmlgithub-pages