Center image using text-align center?
Posted By: Anonymous
Is the property text-align: center; a good way to center an image using CSS?
img {
text-align: center;
}
Solution
That will not work as the text-align property applies to block containers, not inline elements, and img is an inline element. See the W3C specification.
Use this instead:
img.center {
display: block;
margin: 0 auto;
}<div style="border: 1px solid black;">
<img class="center" src ="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-icon.png?v=c78bd457575a">
</div>Answered By: Anonymous
Related Articles
- Having trouble with my nav bar/header, It used to…
- Use css gradient over background image
- Pandas pivot_table: filter on aggregate function
- insert tables in dataframe with years from 2000 to…
- Centering in CSS Grid
- Trying to keep dropdown menus flush to the edge of…
- Show/hide 'div' using JavaScript
- Best way to extract messy HTML tables using BeautifulSoup
- Obtain most recent value for based on index in a…
- Does bootstrap have builtin padding and margin classes?
- How to format html table with inline styles to look…
- In CSS Flexbox, why are there no "justify-items" and…
- My DIV elements go diagonal instead of horizontal
- Is it possible to apply CSS to half of a character?
- How to use html template with vue.js
- Can Windows Containers be hosted on linux?
- Reset/remove CSS styles for element only
- How to horizontally align ul to center of div?
- center 3 items on 2 lines
- Moving average in MYSQL without dates but grouped by…
- How to specify line breaks in a multi-line flexbox layout?
- Python Monthly Change Calculation (Pandas)
- Pandas / Python - Compare numerically each row with…
- How to create a game over screen for a basic HTML/JS game?
- How to apply rolling t.test with pandas?
- Iterator invalidation rules
- Xampp localhost/dashboard
- html table cell width for different rows
- python 3.2 UnicodeEncodeError: 'charmap' codec can't…
- Chrome / Safari not filling 100% height of flex parent
- How to properly use slot inside of vue js web…
- Vertically align an image inside a div with…
- How to place two divs next to each other?
- Vertical Align Center in Bootstrap 4
- How to convert Rows into Columns in Informix 12.10
- CSS grid wrapping
- How can I close an element when the div content or a…
- How get consecutives weeks in a group in df python?
- [Vue warn]: Error in render: "TypeError: Converting…
- How to vertically center a container in Bootstrap?
- How to add fade animation for this tab
- Changing cursor for draggable not working in chrome…
- Javascript validate all checkboxes are selected
- Reimplementing html table with polymer not work
- How do i update a javascript variable as its value changes?
- VueJS masonry layout
- Why is a div with "display: table-cell;" not…
- How to make and appear on the same line on an HTML form?
- Remove all child elements of a DOM node in JavaScript
- Using "margin: 0 auto;" in Internet Explorer 8
- How to vertically align an image inside a div
- html tables & inline styles
- How to horizontally center an element
- Print the significance of the relationship and…
- Not able to get transparent dropdown menu
- Iron flex layout: not getting the proper layout
- Why doesn't the height of a container element…
- how to use canvas in JavaScript flappy bird code
- Javascript and css animation
- How do I remove the top margin in a web page?
- Bootstrap Carousel Full Screen
- How to specify height of nested web component custom…
- Why does this CSS margin-top style not work?
- Margin-Top not working for span element?
- How do I center floated elements?
- What's the difference between display:inline-flex…
- CSS Input with width: 100% goes outside parent's bound
- Changing display none to block using Javascript and polymer
- Why is it that "No HTTP resource was found that…
- Vue Transition not Triggering on button click
- Display Grid does not work in Polymer correctly
- How to center an element horizontally and vertically
- Table with table-layout: fixed; and how to make one…
- When I use '/js/app.js' on my Laravel view my…
- D3.js: Update barplot based on variable input
- Show red border for all invalid fields after…
- SSH into Azure App Service for Docker Container
- Component to take all available height with Flexbox…
- Deviantart style image gallery CSS
- moving text and image in nav
- I made a game it should display two images when i…
- Xamarin iOS new StackTrace() kills App: Assertion…
- Sort table rows In Bootstrap
- MYSQL inserting rows with missing dates
- Polymer drag-drop event object property contains…
- What methods of ‘clearfix’ can I use?
- Using margin:auto to vertically-align a div
- How can I apply a border only inside a table?
- Rebuild Docker container on file changes
- What does the CSS rule "clear: both" do?
- HTTP Status 500 - org.apache.jasper.JasperException:…
- Increasing size of semi circle using css
- Placing border inside of div and not on its edge
- Do not close the mode in the mouse up event
- Create HTML with inline CSS(including color, font…
- How can I clear the container related to (kubernetes)k8s?
- Error in styles_base.xml file - android app - No…
- How is Docker different from a virtual machine?
- Dividing each row by the previous row
- How to implement sub menu of the current route's…
Disclaimer: This content is shared under creative common license cc-by-sa 3.0. It is generated from StackExchange Website Network.
